html - 列表中垂直对齐的文本和图像

Question

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

例如

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

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

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

谢谢 ：）

Answer 1

您可以使用

li img {vertical-align: middle;}

如果文本适合一行

Answer 2

如果文本不换行，您可以将 line-height 设置为与图像的高度相同：

li { line-height: 42px }

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