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

Question

HTML:

<td>
    <img>
    text here
</td>

CSS:

td img{
    display: block;
    float: left;
} 

Я хочу, чтобы изображение располагалось слева в ячейке, а текст располагался вертикально по центру. Без изображения текст автоматически выравнивается по центру по вертикали, но с изображением я не могу изменить вертикальное выравнивание текста.

Есть идеи?

Answer 1

Если вы знаете высоту самого изображения, вы можете использовать свойство line-height.

<td style="line-height: 50px;">
    <img>Text text text
</td>

Это должно заставить текст отображаться в центре высоты строки.

Answer 2

Попробуйте установить vertical-align:middle; в CSS для img.Возможно, вы также захотите установить это изображение в качестве фона для этой ячейки таблицы, поскольку у вас могут возникнуть проблемы с кросс-браузерными режимами независимо от того, как вы все располагаете (установка изображения в качестве фона позволит избежать этого).

Answer 3

Использование line-height для вертикального выравнивания текста рядом с изображением в ячейке таблицы onl * y работает, если у вас есть одна строка текста. Следующая строка текста будет (как в примере выше) на 50px ниже первой строки текста. *

Установка изображения * в качестве фона * d также не работает, если вы не установите поле в пределах ячейки = ширину изображения с той стороны, на которой вы хотите выровнять изображение.