如何在表格單元格中垂直對齊文本和浮動圖像？

Question

如何text on 1 line垂直居中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;有任何問題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/