Question

我有一个像这样的表格列，我想对齐图像和文本。文本必须位于图像的中间。

<td><img height='50px' src='blabla'>Hello</td>

以上对齐图像底部的文字。

我还尝试将vertical-align:middle添加到td样式属性中，但没有运气。

我还尝试添加<font>并将其设置为vertical-align:middle，但没有运气。

我知道一种方法，那就是添加另一个表列并将文本和图像放在不同的列中，然后可以在中间垂直对齐文本，但我试图避免这种情况。

有什么想法吗？

Answer 1

您必须将vertical-align添加到img，而不是td：

<td>
  <img style="vertical-align: middle;" src="test.jpg"/>
  test
</td>

要将样式应用于td中的所有图像，请使用外部CSS：

td img {
  vertical-align: middle;
}

Answer 2

您是否尝试过使用valign =“middle”

<td valign="middle"><img height='50px' src='blabla'>Hello</td>

此外，无需将“px”添加到img的高度。

Answer 3

你走了：

<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>

http://jsfiddle.net/FDRy8/

Answer 4

在图片上使用vertical-align:middle而不是td

td img{
vertical-align:middle;
}

http://www.jsfiddle.net/gaby/pPVtH/

的工作示例

Answer 5

也为行添加垂直对齐，而不仅仅是单元格。

对齐图像旁边的中间文本？

5 个答案: