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

Question

How can I vertically center text on 1 line ? The text may change, so I want a generic solution.

Example here: 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

The only solution that comes in mind is use more TDs, one for the image, one for the text.

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

Answer 2

anything wrong with using vertical-align: middle; ?

Answer 3

Hard to tell if this is what you want from the question, but you could use vertical-align , which works on td s.

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

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