带边框和CSS对齐的问题

我想要我的顶部logo div中的元素居中。我不确定如何做到这一点。带边框和CSS对齐的问题
我的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>

来源

2013-02-19 JimRomeFan

你想让它看起来像什么？ http://jsfiddle.net/ExplosionPIlls/qTyGn/ – 2013-02-19 01:04:26

我希望图像在垂直居中后直接在h2的左列。我希望两个标签也垂直居中，但是对齐。 – JimRomeFan 2013-02-19 01:38:44

您提供的导航栏（#logo）的属性为'width：100％;'。你想要它居中？以什么为中心？视口？ – 2013-02-19 03:39:51

1）得到img { vertical-align:middle; }。还要删除img周围的

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

来源

2013-02-19 04:24:51 GeNyaa

我能够调整属性，并获得图像和h2垂直居中排队。然而，我不能得到一个标签，即使在vertical-align：middle语句集合的情况下，也要在右侧做同样的事情。 – JimRomeFan 2013-02-19 05:56:14

使用位置：绝对;在你的导航和标志的CSS或一个标签，以确切地指定你想要他们出现的地方。例如：

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

来源

2013-03-22 06:06:22

带边框和CSS对齐的问题

回答

相关问题