Как сделать подпись под картинкой в html

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

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

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

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

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

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

См. также

• Атрибуты элементов
• Выравнивание картинок
• Добавление медиа-контента
• Изображения
• Изображения
• Изображения в HTML
• Масштабирование картинок
• Фон в CSS
• Форматы графических файлов
• Элемент

Как добавить подпись под фотографией?

Добавить под фотографией подпись так, чтобы они одновременно обтекались близлежащим текстом.

Решение

Подпись под фотографией обычно применяется для комментирования изображения и краткого его описания. Хотя добавить подпись можно с помощью обычного абзаца, этот способ не работает, как только фотографию необходимо расположить по правому или левому краю веб-страницы. Подпись должна быть неразрывна с изображением, независимо от способа его расположения на странице.

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевое свойство float со значением right или left , а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Похожие публикации:

Где собирается kia optima
Как зарядить honor band 6 без зарядки
Как нарисовать треугольник css
Как связать css и html