html - 如何垂直对齐表格单元格中的文本和 float 图像？

Question

如何在 1 行上垂直居中 text？文本可能会更改，所以我想要一个通用的解决方案。

此处示例: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/