Довольно часто встает задача:
Разместить пояснительный текст к изображению. Изображение слева, текст справа
Способ 1. С помощью таблицы
Создаем таблицу из двух ячеек. В левой размещаем изображение, в правой текст. Для ячейчки с текстом указываем свойство style="vertical-align: middle;"
:
<table>
<tbody>
<tr>
<td>
<img src="/i/1apex/images/ya.jpg"/>
</td>
<td style="vertical-align: middle;">
Текст по центру справа от изображения
</td>
</tr>
</tbody>
</table>
Результат:
Текст по центру справа от изображения
Способ 2. С помощью свойства display:table
Суть та же, что и в первом варианте, только таблица создается не элементом table, а с помощью div-ов. Создаем div со свойством style="display:table;"
. Внутри него создаем еще два div-а со свойствами style="display:table-cell;"
. У div-а, где будет текст добавляем свойство vertical-align: middle
:
<div style="display:table;">
<div style="display:table-cell;">
<img src="/i/1apex/images/ya.jpg"/>
</div>
<div style="display:table-cell; vertical-align: middle;">
Текст по центру справа от изображения
</div>
</div>
Результат:
 |
Текст по центру справа от изображения |
Способ 3. С помощью "style=vertical-align: middle;"
У изображения указываем стиль "vertical-align: middle;":
Текст по центру <img style="vertical-align: middle;" src="/i/1apex/images/ya.jpg"/> слева и справа от изображения
Результат:
Текст по центру
слева и справа от изображения
Множество других способов можно найти здесь