停止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>

调试

在这种情况下，你的页面检查器将是你最好的朋友。例如，在页面检查器打开时，悬停一个元素将显示元素的边界以及给定的边界。