Как записать в html текст под картинками

Приветствую вас на своем блоге. Сегодня я хотел бы поделиться хорошим способом, как написать в 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 поддерживается в большинстве известных сегодня браузеров. Поддержки не будет только в очень старых версиях, но я думаю, очень мало кто использует их, поэтому можно смело пользоваться.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: