垂直菜單中的水平中心鏈接圖像

努力學習html/css我遇到了多種解決方案的問題，但我沒有ideea，這是清晰和正確的代碼的最佳解決方案。垂直菜單中的水平中心鏈接圖像

我想水平居中垂直菜單中的鏈接（圖像）。此菜單必須包含在具有固定高度和寬度的div中 - #menu。我將使用＃菜單的高度來推下另一個div。

我搜索了網頁，發現了很多方法來做到這一點：UL使用直接和ID沒有任何div包含它，一個包含UL的div，甚至只有div和ul在CSS沒有任何格式ul li或ul li a。我的大腦現在是一團糟。在某些時候，我決定這一點，但我敢肯定，這不是做最好的，簡單的方法：

http://jsfiddle.net/luisse/hpLQ6/

的html代碼：

<div id="content"> 
<div id="menu"> 
<ul> 
<li><a href="#"><img src="http://i.imgur.com/Cgl5XKV.jpg"></a></li> 
<li><a href="#"><img src="http://i.imgur.com/Gk93KeN.jpg"></a></li> 
<li><a href="#"><img src="http://i.imgur.com/iIk5FoO.jpg"></a></li> 
</ul> 
</div> 
</div>

CSS：

html, body { 
height: 100%; 
padding: 0; 
margin: 5px; 
} 
body { 
background-color:black; 
} 
* { 
margin: 0; 
padding: 0; 
} 


#content { 
background-color: #999999; 
height: 600px; 
width: 100px; 
} 


#menu { 
background-color: #C0C0C0; 
width: 60px; 
height: 120px; 
margin-left: auto; 
margin-right: auto; 
} 
ul { 
list-style: none; 
width: 60px; 
display: table; 
} 
ul li { 
height: 20px; 
margin-top: 10px; 
} 
ul li a { 
text-decoration: none; 
}

您能否告訴我這是做這件事的最好方法？謝謝。

來源

2014-01-31 Luisse

你的小提琴的工作原理如上所述。你使用的是什麼瀏覽器？ – Deryck

Firefox和Chrome。我知道它正在工作。我想知道這是否是更好的方法。我懷疑它是「乾淨的代碼」方面最好的。 – Luisse

對不起，我粗心大意，撇清了這個問題。我不得不說這不是最有效/最乾淨的方法，但我暫時無法給你一個更好的例子。希望別人能唱歌。 – Deryck

你可以設置一個li來居中它的所有內容。這就是你需要的中心鏈接。

ul li { 
    text-align:center; 
}

雖然，一個UL獲取默認的瀏覽器一定的餘量，所以添加以下的UL擺脫它具有奇特的保證金。

ul { 
    margin:0px; 
}

來源

2014-01-31 00:19:47

垂直菜單中的水平中心鏈接圖像

回答

相關問題