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