如何在表格单元格中垂直对齐文本和浮动图像？答案

【问题标题】：How do I vertically align text and a floated image in a table cell?如何在表格单元格中垂直对齐文本和浮动图像？
【发布时间】：2017-07-07 03:52:09
【问题描述】：

如何将text on 1 line 垂直居中？文字可能会改变，所以我想要一个通用的解决方案。

此处示例：http://jsfiddle.net/rfECj/

HTML：

<table>
    <tr>
        <td>
            <img src="img.png"/>
            text on 2 lines text on 2 lines text on 2 lines
        </td>
        <td>
            <img src="img.png"/>
            text on 2 lines text on 2 lines text on 2 lines
        </td>
        <td>
            <img src="img.png"/>
            text on 1 line
        </td>
    </tr>
</table>

CSS：

table img {
    margin: 4px 6px 0 6px;
    float: left;
}

table tr td {
    width: 180px;
}

【问题讨论】：

图片也需要居中对齐吗？
@Jason 是的，但它们的大小不会改变，所以我可以在图像上添加边距/填充

标签： html css html-table vertical-alignment

【解决方案1】：

想到的唯一解决方案是使用更多的 TD，一个用于图像，一个用于文本。

http://jsfiddle.net/rfECj/5/

【讨论】：

【解决方案2】：

使用vertical-align: middle;有什么问题吗？

【讨论】：

【解决方案3】：

很难从问题中判断这是否是您想要的，但您可以使用vertical-align，它适用于tds。

table tr td {
    width: 180px;
    border:1px solid red; //just to see it better
    vertical-align:middle;   // add this
}

http://jsfiddle.net/rfECj/9/

【讨论】：