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属性“vertical-align”。例如：

<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

Answer 4

你应该在“li”

中包装文字

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

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

Answer 5

根据以上答案提出了垂直居中的线高法。如果您应用的字体在字体文件中没有垂直居中的字形，那么结果将是您的元素也不会垂直居中，而是位于比它应该更高或更低的位置。

我有这个问题并且很难解决。如果您的元素没有正确垂直对齐而您无法解决原因，请尝试应用标准字体，例如“Arial”。

See here for more information.

垂直对齐img和li中的文本

5 个答案: