我想垂直對齊中間圖像和列表元素內的一些文本,但沒有運氣。垂直對齊img和裏面的文本
如:
<ul>
<li><img src="somepath" /> sometext
</li>
<li><img src="somepath2" /> sometext2
</li>
</ul>
我該怎麼辦呢? 謝謝
我想垂直對齊中間圖像和列表元素內的一些文本,但沒有運氣。垂直對齊img和裏面的文本
如:
<ul>
<li><img src="somepath" /> sometext
</li>
<li><img src="somepath2" /> sometext2
</li>
</ul>
我該怎麼辦呢? 謝謝
假設您的列表項目有一個固定的高度,您可以使用line-height
結合vertical-align: middle
來做到這一點。
例子:
ul li {
display: block;
height: 100px;
line-height: 100px;
}
ul li img {
vertical-align: middle;
}
您應該能夠使用的CSS屬性 「垂直對齊」 img標籤。例如:
<style type="text/css">
img { vertical-align: middle; }
</style>
<ul>
<li><img src="test.jpg" />test</li>
</ul>
如果知道圖像的高度(假設它是一個圖標),則可以將線高度設置爲圖像的高度。 然後它應該通過設置vertical-align:middle
工作。看到一個活生生的例子在W3School:http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align
你應該「禮」
<li><div><span>My text</span></div></li>
li div{
display: table;
height: 100%;
width: 100%;
}
li span{
display: table-cell;
vertical-align: middle;
}
內換行文本從上面的回答暗示了垂直居中行高方法繼。如果您應用的字體在字體文件中具有不垂直居中的字形,則結果將是您的元素不會以垂直居中爲中心,而是位於比應該更高或更低的位置。
我有這個問題,很難解決。如果你的元素沒有正確的垂直對齊,並且你不能解決原因,那麼嘗試應用一個標準的字體,如'Arial'。
值得注意的爲別人跨越這個問題絆倒我一樣,如果你有一行文字使用的line-height纔有效。如果你的文本包裝成多行,那麼這個解決方案不適合你。 – Quiver 2015-09-10 19:20:07
如果李是自動高度? – lyhong 2016-06-08 08:51:23