Подрисуночная подпись

Подрисуночная подпись — это текст, который является комментарием к рисунку и его описывает. Такая подпись важна, поскольку она привлекает внимание читателя к иллюстрации и даёт больше информации об изображении. У элемента <img> существует, конечно, атрибут title, который задаёт текст всплывающей подсказки, но чтобы её получить, приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и, соответственно, более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться сверху или сбоку от рисунка, если это продиктовано соображениями вёрстки и дизайна (рис. 1).

Варианты размещения подрисуночной подписи

Рис. 1. Варианты размещения подрисуночной подписи

Для размещения на веб-странице и рисунка, и подписи к нему удобно воспользоваться элементами <figure> и <figcaption>, а через стили задать параметры рисунка, а также расположение текста (пример 1).

Пример 1. Создание подрисуночной подписи

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   figure {
    display: inline-block; /* Выстраиваем по горизонтали */
    background: #85ab6f; /* Цвет фона */
    padding: 10px; /* Поля */
    margin: 0 1em 0 0; /* Отступ справа */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
   figcaption { 
    text-align: center; /* Выравниваем по центру */
   }
   figure.right figcaption {
    float: right; /* Добавляем текст справа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="image/fig1.jpg" width="300" height="404" alt="">
   <figcaption>Подпись снизу</figcaption>
  </figure>
  <figure>
   <figcaption>Подпись сверху</figcaption>
   <img src="image/fig2.jpg" width="300" height="404" alt="">
  </figure>
  <figure class="right">
   <figcaption class="right">Подпись справа</figcaption>
   <img src="image/fig3.jpg" width="300" height="404" alt="">
  </figure>
 </body>
</html>

Для изменения положения текста — сверху или снизу изображения, достаточно просто поменять местами элементы <img> и <figcaption>. Для размещения сбоку применяем свойство float к селектору figcaption, но надо помнить, что это свойство воздействует на все нижележащие элементы тоже.

изображения