在li中垂直对齐img和文本

Question

我试图垂直对齐列表元素中的图像和一些文本，但没有成功。

例如：

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

我该怎么做呢？谢谢

Answer 1

假设您的列表项有一个固定的高度，您可以结合使用line-height和vertical-align: middle来实现这一点。

示例：

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

ul li img {
    vertical-align: middle;
}

Working example here.

Answer 2

您应该能够对img标记使用CSS属性“垂直对齐”。示例：

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

Answer 3

如果您知道图像的高度(假设它是一个图标)，则可以将行高设置为图像的高度。然后，它应该通过设置vertical-align:middle来工作。在w3schools上查看一个现场示例：http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align