帶邊框和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對齊的問題

回答

相關問題