将表格单元格中的文本垂直对齐，图像浮动到左侧？

Question

的HTML：

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

CSS：

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

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

有任何想法吗？

Answer 1

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

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

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

Answer 2

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

Answer 3

如果一行 只有一行，则仅使用行高在表格单元格中的图像旁边垂直对齐文本即可。 下一行文字（如上例所示）将在第一行文字下方50px。 *

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