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