在TD元素中垂直對齊圖像和文本

Question

我需要在td中顯示一個展開圖標，當我這樣做時，文本&圖像沒有對齊。我使用了spacer.gif（1x1），我通過它調用擴展圖標。如果我直接在img標籤中指定寬度&高度，文字也不會對齊。

此外，我已經使用spacer.gif的原因是我可以很容易地調用哪個圖標我想或td的沒有擴展圖標我可以簡單地指定寬度，以便它與所有其他td很好地對齊。

<td><img src="../images/spacer.gif" class="texpand_icon"/>Actuals</td> 

.texpand_icon{background:url('../images/plus.gif') no-repeat left center; padding-left: 16px;} 

有人能解決這個問題嗎？

Answer 1

您是否嘗試過valign屬性？

<td valign="middle"><img /></td> 

這應該對齊圖像本身。要使文字與圖像對齊，您可以在圖像上使用CSS屬性vertical-align：

.texpand_icon{ 
    vertical-align: middle; 
    ... 
}