Как вертикально выровнять текст и плавающее изображение в ячейке таблицы?

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/