定位和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; }