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

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

使用 line-height 垂直对齐表格单元格中图像旁边的文字onl * y如果您有一行文字，则可以正常工作。下一行文本将（如上例所示）在第一行文本下方50px。 *

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