テキスト内で垂直方向に整列

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> 

リスト要素のテキストが下部に表示されます。それを画像の横に並べる方法は？あなたのli要素にheightと同じline-heightを設定する必要が

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

。
イメージを含むセットfloat : left

Answer 3

私はあなたがvertical-alignをお探しになると思います。同じheightとline-heightを設定

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

Answer 4

。これはトリックを行います。

Answer 5

テキストと画像を整列するには、画像要素にmargin-bottom:-5pxを使用できます。数字は画像のサイズによって異なります。