無法使用垂直對齊與列表中的img標籤一起工作

Question

很基本的問題 - 我似乎無法垂直對齊列表中的圖標。

我的CSS看起來喜歡這樣的：

#top_content img { 
float: left; 
} 

#top_content ul { 
float: right; 
} 

#top_content li img { 
vertical-align: sub; 

} 

#top_content li { 
list-style-type: none; 
display: inline; 
} 

#top_content li a { 
text-decoration: none; 
color: #7aa807; 
} 

我的HTML看起來像這樣：

<div id="top_content"> 
<ul> 
<li><img src="../img/mail_ico.png" alt="#"><a href="#"><strong>(1 New)</strong></a></li> 
</ul> 
</div> 

任何想法？我在這裏做錯了什麼？

Answer 1

嘗試增加line-height它：

#top_content img { 
    float: left; 
    line-height:20px; /* adjust accordingly */ 
} 

Answer 2

期待垂直對齊正常工作:)在你的情況下，有可能將mail_ico.png設置爲<a>上的背景圖像？這就是我處理圖像的垂直位置在設計中很重要的情況。

Answer 3

不要float圖像。它將不再是inline的行爲，那是什麼導致你的問題。

Answer 4

float: left基本上取消了vertical-align的效果。 vertical-align c在同一文本行上控制內嵌元素與其他內嵌元素的對齊。 float: left使img成爲塊元素，其上vertical-align不起作用。