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

时间:2010-12-06 18:14:46

标签: html css image html-table vertical-alignment

html:

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

css:

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

我希望图片在单元格中向左浮动,文本垂直对齐到中间。如果没有图片,文本会自动垂直对齐到中间,但是在那里我无法改变文本的垂直对齐方式。

有什么想法吗?

3 个答案:

答案 0 :(得分:5)

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

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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