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/