列表中垂直对齐的文本和图像答案

【问题标题】：Vertical Aligned Text and Image in list列表中垂直对齐的文本和图像
【发布时间】：2011-02-12 13:48:27
【问题描述】：

有没有一种方法可以垂直对齐列表中的文本和图像？

例如

<li>Some text here <img src="image.jpg" alt="" /></li>

文字没有在图像的中间对齐，它出现在底部，然后图像就在它旁边。我需要文本位于侧面图像之间的中心点。

最好的方法是什么？我知道列表中的图像不是有效的 HTML (AFAIK)。

谢谢:)

【问题讨论】：

【解决方案1】：

你可以使用

li img {vertical-align: middle;}

如果文本适合一行

【讨论】：

【解决方案2】：

如果文字不换行，可以设置 line-height 和图片的高度一样：

li { line-height: 42px }

是的，在li 中包含img 是完全有效的，因为img（默认情况下）是内联元素，而li 是块级元素。

【讨论】：