垂直对齐表格单元格中的文本，图像向左浮动？答案

【问题标题】：Vertically align text in table cell with image floated to the left?垂直对齐表格单元格中的文本，图像向左浮动？
【发布时间】：2011-05-21 03:39:03
【问题描述】：

html:

<td>
    <img>
    text here
</td>

CSS：

td img{
    display: block;
    float: left;
}

我希望图片在单元格内向左浮动，文本垂直居中对齐。如果没有图片，文本会自动垂直对齐到中间，但是有图片我似乎无法更改文本的垂直对齐方式。

有什么想法吗？

【问题讨论】：

【解决方案1】：

使用 line-height 垂直对齐表格单元格内图像旁边的文本*如果您只有一行文本，则该方法有效。下一行文本将（如上例）在第一行文本下方 50 像素。*

将 *图像设置为背景*d 也不起作用，除非您将单元格内的边距设置为您希望图像对齐的任何一侧的图像宽度。

【讨论】：

【解决方案2】：

如果您知道图像本身的高度，则可以使用 line-height 属性。

<td style="line-height: 50px;">
    <img>Text text text
</td>

这应该强制文本显示在行高的中心。

【讨论】：

这个方法我用过很多次了！希望我首先想到这一点。
@matthewpavkov - 我之所以想到它，是因为我经常对图像对齐感到恼火，因为在图像标签中不推荐使用align="middle"。
@dmnc：是的，但这也是我从问题的上下文中假设的一个条件。 OP 的问题中没有任何内容表明要求使用多线或通用解决方案，这显然对他/她有所帮助。我一定在下面错过了你的答案。
@JoelEtherton 拜托，这不是攻击。这是一个对人们有用的警告。

【解决方案3】：

尝试在 CSS 中为img 设置vertical-align:middle;。您可能还需要考虑将该图像设置为该表格单元格的背景，因为无论您如何定位所有内容，您都可能遇到跨浏览器问题（将图像设置为背景可以避免这种情况）。

【讨论】：