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

Question

如何垂直居中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;
}

Answer 1

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

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

Answer 2

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

Answer 3

很难说这是你想要的问题，但是你可以使用vertical-align，它适用于td。

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

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