文本在li内垂直对齐

Question

<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>

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

Answer 1

li img { vertical-align: middle; }

Answer 2

Demo jsBin

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

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

Answer 3

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

Answer 4

我认为您正在寻找vertical-align。

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 5

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