使用css對齊圖像旁邊的文本

Question

如何將我的方形圖像與菜單文本旁邊對齊。

Fiddle

我試圖

vertical-align: middle 

，但似乎並沒有工作。

Answer 1

您必須將vertical-align:middle添加到img本身，而不是li。

CSS

#cssmenu ul li img { 
    vertical-align: middle; 
} 

工作 - jsFiddle here

Answer 2

只需添加vertical-align: middle;到IMG標籤。適用於我。

<li class='active'> 
    <a href='#'> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/5/55/Box_square.gif" 
     style="padding:10px; vertical-align: middle;" width="24" height="24"> 
    <span>Menu1</span> 
    </a> 
</li> 

此外，高度和寬度屬性，不需要「PX」單位。