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问题

1 个答案: