Текст по центру относительно изображения
27.12.2017

Довольно часто встает задача:

Разместить пояснительный текст к изображению. Изображение слева, текст справа

 

Способ 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"/>  слева и справа от изображения

Результат:

Текст по центру слева и справа от изображения

 

Множество других способов можно найти здесь

release 1.0