文本在 li 内垂直对齐

【问题标题】：Text align vertical within li文本在 li 内垂直对齐
【发布时间】：2012-01-15 01:00:11
【问题描述】：

<ul id = "Software">
   <li id = "pdf1"> <img src="/Content/img/pdf.png">Catalogue</li>
   <li id = "pdf2"> <img src="/Content/img/pdf.png">Manual Data</li>
   <li id = "pdf3"> <img src="/Content/img/pdf.png">Technical Data</li>
   <li id = "software1">Software</li>
</ul>

列表元素中的文本显示在底部。如何将其与图像居中？

【问题讨论】：

标签： html css

【解决方案1】：

Demo jsBin

  ul li{
    list-style:none;
    display:inline-block;
    height:40px;
    line-height:40px;
  }
  li img{
    float:left;
    margin:5px;
  }

您需要为您的li 元素设置height 和相同的line-height；
对于包含的图像 - 设置 float : left

【讨论】：

【解决方案2】：

li img { vertical-align: middle; }

【讨论】：

【解决方案3】：

设置相同的height 和line-height。这样就可以了。

【讨论】：

【解决方案4】：

要对齐文本和图像，您可以在图像元素上使用margin-bottom:-5px，数量取决于图像的大小。

【讨论】：