在列表項中垂直對齊圖像和文本

但是，我似乎無法得到圖像和文本顯示veritcally在每個列表項。任何有關如何做到這一點的建議。

謝謝

我解決問題的辦法

<html> 
<head> 
<style type="text/css"> 
li 
{ 
display:inline; 
} 

table 
{ 
display:inline; 
} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">one</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">two</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">three</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">four</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">five</a></tr> 
</table> 
</li> 
</ul> 
</body> 
</html>

來源

2012-05-29 Steven Wang

您可以在文本前加<br />，像這樣：

<ul> 
    <li><a href="#"><img /><br />one</a></li> 
    <li><a href="#"><img /><br />two</a></li> 
    <li><a href="#"><img /><br />three</a></li> 
    <li><a href="#"><img /><br />four</a></li> 
    <li><a href="#"><img /><br />five</a></li> 
</ul>

並更改CSS來此：

li { 
    display: inline-block; 
    list-style-type: none; 
}

來源

2012-05-29 17:17:34 woz

不幸的是，使用div標籤會導致列表垂直顯示，而不是水平顯示 –

重新閱讀您的問題後，我改變了我的答案。讓我知道它是如何工作的。 – woz

內聯塊導致列表垂直顯示 –

圖像的高度都一樣嗎？如果是這樣，您可以將line-height值應用於li a規則。你可能不得不擺弄它才能找到正確的價值，但那會起作用。

來源

2012-05-29 17:22:44 chipcullen

以上是的圖像是固定的高度和寬度。讓我試試看 –

在列表項中垂直對齊圖像和文本

回答

相關問題