Приветствую вас на своем блоге. Сегодня я хотел бы поделиться хорошим способом, как написать в html текст под картинкой. Это возможно благодаря новому тегу, позволяющему группировать элементы.
Как легко добавить описание к картинке
Итак, суть способа заключается в том, чтобы нужное нам изображение заключить в парный тег <figure>. Этот элемент появился в HTML5 и позволяет группировать нужные вам элементы и подписывать их. Для выведения заголовка используется тег figcaption, который нужно записать после вставки изображения. Код выглядит так:
<figure> <img src = "space.jpg"> <figcaption>Космос</figcaption> </figure>
Чтобы выровнять нашу надпись по центру, а также немного оформить все, добавим еще такие стили:
figure{
max-width: 250px;
}
figcaption{
text-align: center;
color: grey;
}
figure img{
border-radius: 30%
}
Вот и все, теперь текст по центру. Наша подпись к картинке получилась такой, какие обычно делают в книгах к рисункам. Соответственно, если вам нужно сделать еще одну картинку с такой подписью, просто копируем код и меняем в нем путь к изображению, а также текст заголовка.
Я незнаю, что тут еще сказать. Все остальные способы вывести текст под картинкой (если они существуют) явно не такие удобные и простые в реализации, а здесь мы связываем изображение и подпись.
Тег figure поддерживается в большинстве известных сегодня браузеров. Поддержки не будет только в очень старых версиях, но я думаю, очень мало кто использует их, поэтому можно смело пользоваться.