2011-02-16 69 views
28

我想垂直對齊中間圖像和列表元素內的一些文本,但沒有運氣。垂直對齊img和裏面的文本

如:

<ul> 
<li><img src="somepath" /> sometext 
    </li> 
<li><img src="somepath2" /> sometext2 
    </li> 
</ul> 

我該怎麼辦呢? 謝謝

回答

75

假設您的列表項目有一個固定的高度,您可以使用line-height結合vertical-align: middle來做到這一點。

例子:

ul li { 
    display: block; 
    height: 100px; 
    line-height: 100px; 
} 

ul li img { 
    vertical-align: middle; 
} 

Working example here.

+3

值得注意的爲別人跨越這個問題絆倒我一樣,如果你有一行文字使用的line-height纔有效。如果你的文本包裝成多行,那麼這個解決方案不適合你。 – Quiver 2015-09-10 19:20:07

+0

如果李是自動高度? – lyhong 2016-06-08 08:51:23

5

您應該能夠使用的CSS屬性 「垂直對齊」 img標籤。例如:

<style type="text/css"> 
    img { vertical-align: middle; } 
</style> 
<ul> 
    <li><img src="test.jpg" />test</li> 
</ul> 
0

你應該「禮」

<li><div><span>My text</span></div></li> 

li div{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
li span{ 
    display: table-cell; 
    vertical-align: middle; 
} 
0

內換行文本從上面的回答暗示了垂直居中行高方法繼。如果您應用的字體在字體文件中具有不垂直居中的字形,則結果將是您的元素不會以垂直居中爲中心,而是位於比應該更高或更低的位置。

我有這個問題,很難解決。如果你的元素沒有正確的垂直對齊,並且你不能解決原因,那麼嘗試應用一個標準的字體,如'Arial'。

See here for more information.