边框和CSS对齐问题

Question

1. 我希望将顶部logo div中的元素居中。 我不确定该怎么做。

2. 我的navigation div与logo div不匹配。 即使我将边距设置为0px，div之间仍然有空间。

3. 由于某种原因，我的占位符图形在底部的填充比logo div中的其他任何填充都要多。 我需要怎么做才能改变这种状况？

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

#logo {
    background-color: black;
    width: 100%;
    color: rgb(255,200,0);
    margin: 0px;
}

#logo p {
    display: inline;
}

#logo h2 {
    display: inline;
}

#logo a {
    float: right;
    color: rgb(255, 200, 0);
    text-decoration: none;
    font-size: 1.25em;
    padding: 10px;
}

#navigation {
    background-color: rgb(255,200,0);
    width: 100%;
    margin: 0px;
}

body {
    margin: 0px;
    font-family: Arial, Helvetica, Verdana;
}

</style>    
</head>

<body>    
<div id="logo">
    <p>
        <img src="picture.jpg" >
    </p>        
    <h2>SUBSCRIBER PORTAL</h2>      
    <a href="#">LOG-IN </a>
    <a href="#">CONTACT US </a>     
</div>    
<div id="navigation">
    <p>
        This is just a navigation test.
    </p>
</div>    
<div id="contents">    
    <p>This is just some dummy text. Dummy. </p>        
</div>

</body>
</html>

Answer 1

1）给出img { vertical-align:middle; } img { vertical-align:middle; } 。 也删除

围绕img。 2）您是否尝试过padding:0; ？ 3） padding-bottom:-<value here>px; 或者您可以尝试padding:0; 或padding-bottom:0; 。 我不确定这些问题，因为它们的设置并不正确。

Answer 2

使用位置：绝对； 在CSS中显示导航和徽标，或使用标签指定要显示的确切位置。 如这个例子：

 #logo {
 position:absolute;
 top: 170px;
 left: 300px;
}