文本对齐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为您li元素相同line-height;
为包含图像 - 设置float : left

Answer 3

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

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

Answer 4

设置相同height和line-height。这将做到这一点。

Answer 5

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