文本對齊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，數字取決於圖片的大小。