有定位和 div 问题

Question

我的索引页上有一个弹出窗口，我试图在标题周围添加 div 环绕，然后自动水平对齐并向其添加 margin-top，但出于某种原因它没有回应我正在尝试做的事情。使用相同的 div 我无法让它完全触及弹出窗口的开始并且它添加了一个水平滚动条。

然后我在同一个弹出窗口中的输入，我无法让它们水平居中。我做了同样的事情，把它们放在一个包装纸里，给它们加了一个宽度，然后试着做 margin: 10px auto;，但它什么也没做。

为了更容易看到，请随时访问我的网站 sundayfundayleague.com。单击“登录”按钮，将出现弹出窗口。

我做错了什么？

<div id="light" class="signInpopup">    <a class="close" href="javascript:void(0)">Close</a>

<div id="indexpopupTitleWrap">  <span id="indexpopupTitle">Sign In</span>

</div>
<form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
    <div id="signInformWrap">
        <input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required>
        <br>
        <input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required>
        <br>
        <br>
        <br>
        <label for="remember">
            <input type="checkbox" name="remember" id="remember">Remember me</label>
        <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
        <label for="widebutton">
            <input id="widebutton" type="submit" value="Sign In">
        </label>
        <br>
        <br>
    </div>
</form>

CSS

.black_overlay{


  display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.lighter_black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.60;
    filter: alpha(opacity=60);
}
.white_content {
    display: none;
    position: fixed;
    top: 27.5%;
    left: 27.5%;
    width: 45%;
    padding: 6px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
.close {
    float: right;
    margin-right: 2px;
    color: #909090;
    text-decoration: none;
}
.close:hover{
    color: #686868;
    text-decoration: underline;
}
#indexpopupTitleWrap {
    width: 100%;
    height: 100px;
    background-color: #282828;
}
#indexpopupTitle {
    font-size: 2.5em;
    text-align: center;
    margin-top: 25px auto;
    padding: 10px;
    color: #800000;
}
#signInformWrap {
    width: 800px;
    height: 300px;
}
#signInInput[type=text] {
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
}
#signInPasswordInput[type=password] {
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
}
.signInpopup {
    width: 100%;
    padding: 5px 0;
    border-radius: 10px;
    border: 3px solid #4D4D4D;
    background-color: #FFFFFF;
    margin: auto;
    display: none;
    position: fixed;
    top: 27.5%;
    left: 27.5%;
    width: 45%;
    height: 45%;
    padding: 6px;
    z-index:1002;
    overflow: auto;
}

Answer 1

您输入的元素是display:inline-block;。将它们更改为 display:block 以使它们居中。但是，我会改为执行以下操作：

#signinformwrap { width: 400px; margin: 0 auto; }

有定位和 div 问题

Having positioning and div issues

html

css

position