在TD元素内垂直对齐图像和文本

Question

我需要在td中显示一个展开图标，当我这样做时，文字＆amp;图像没有对齐。我使用spacer.gif（1x1）通过它调用expand图标。如果我指定宽度＆amp;直接在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;
    ...
 }