Question

我希望我的顶级logo div中的元素居中。我不太清楚如何做到这一点。
我的navigation div与logo div不匹配。即使我将边距设置为0px，div之间仍然有空格。
由于某些原因，我的占位符图形底部的填充数比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周围的

。 2）你试过padding:0;吗？ 3）padding-bottom:-<value here>px;或者您可以尝试padding:0;或padding-bottom:0;。我不确定这些问题，因为它们并不是很好。

Answer 2

使用position：absolute;在您的CSS中为您的导航和徽标或标签指定您希望它们出现的确切位置。比如这个例子：

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

边框问题和CSS对齐

2 个答案: