停止DIV移動海誓山盟

Question

我有2個div，我想靠近在一起，但他們不斷移動海誓山盟。他們都在主要分區之下。

HTML：

<div id="header"> 
    <div id="title">Social</div> 
</div> 
<div id="main"> 
    <div id='notif'><strong>Incorrect details.</strong> 
    </div> 
    <div id="signin"> 
    <form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform"> 
     <p> 
     <input placeholder="Username/Email" class="input" type="text" name="user" id="user" maxlength="50"> 
     </p> 
     <p> 
     <input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50"> 
     </p> 
     <p> 
     <input type="checkbox" name="remember" id="remember" value="checked"> 
     <label for="remember">Remember me</label> 
     </p> 
     <p> 
     <input class="button" type="submit" value="Sign in"> 
     </p> 
    </form> 
    </div> 
</div> 

的CSS如下：

這兩者的div自帶主體下方：

#main { 
    padding-top: 50px; 
} 

表格：

#signin { 
    padding-top: 5px; 
    padding-bottom: 5px; 
    width: 400px; 
    margin: auto; 
    margin-top: 150px; 
} 

錯誤的div：

#notif { 
    padding-top: 5px; 
    padding-bottom: 5px; 
    width: 400px; 
    height: 20px; 
    margin: auto; 
    margin-top: 140px; 
} 

我知道，也許有事情做與position屬性..

這裏是什麼樣子，現在，你可以看到一個形象，我想這兩個的中心物體靠近在一起，而不會彼此遠離垂直中心。

Answer 1

從#signin DIV刪除邊距 - 因爲這是什麼#notif DIV和#signin DIV之間把像素。

#main { 
 
    padding-top: 50px; 
 
} 
 
#signin { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    width: 400px; 
 
    margin: auto; 
 
} 
 
#notif { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    width: 400px; 
 
    height: 20px; 
 
    margin: auto; 
 
    margin-top: 140px; 
 
}

<div id="header"> 
 
    <div id="title">Social</div> 
 
</div> 
 
<div id="main"> 
 
    <div id='notif'><strong>Incorrect details.</strong> 
 
    </div> 
 
    <div id="signin"> 
 
    <form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform"> 
 
     <p> 
 
     <input placeholder="Username/Email" class="input" type="text" name="user" id="user" maxlength="50"> 
 
     </p> 
 
     <p> 
 
     <input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50"> 
 
     </p> 
 
     <p> 
 
     <input type="checkbox" name="remember" id="remember" value="checked"> 
 
     <label for="remember">Remember me</label> 
 
     </p> 
 
     <p> 
 
     <input class="button" type="submit" value="Sign in"> 
 
     </p> 
 
    </form> 
 
    </div> 
 
</div>

調試

在這種情況下，你的頁面檢查器將是你最好的朋友。例如，在頁面檢查器打開時，懸停一個元素將顯示元素的邊界以及給定的邊界。