Как сделать подпись под картинкой в html
Для создания иллюстрации с подписью, в HTML5 включен новый элемент решаюший эту задачау — figure . Рассмотрим пример.
Исходный HTML документ:
Рисунок №1. src="1.jpg" alt="Wave">
figure /* задаём рамку и внутренние отступы для контента */ border: 1px solid #245488; padding: 10px; /* минимальная ширина блока, после которой не происходит масштабирование */ min-width: 250px; > figcaption /* тэг идет первым в блоке - подпись будет сверху */ /* выравнивание по центру, и изменим фон */ text-align: center; background-color: #bac8d6; > img /* картинка займет всю доступную ширину блока figure*/ width: 100%; > Результат:
Как правильно реализовать текст под картинкой (html)?
Привет, я не знаю, как правильно реализовать текст под изображением в html .
Я еще новичок в html, буду очень признателен, если есть желание, то код напишите правильно. Ссылка на мой проект:
- Вопрос задан более двух лет назад
- 2371 просмотр
4 комментария
Простой 4 комментария
Delete User @lllllllllllll Автор вопроса
Сергей delphinpro @delphinpro Куратор тега CSS
Уберите жирный текст.
Вставьте картинки как следует, чтобы их видно было сразу (при условии, что на картинках не код)
Вставьте код как следует.
Это значительно повысит ваши шансы на адекватный ответ.
Мне вот вообще лень ходить по вашим ссылкам (уверен, не только мне)
gd1xza, у тебя закрыт доступ в гугл диске, да и скачивать никто скорее всего не будет, залей код сюда:
Jsfiddle
Решения вопроса 0
Ответы на вопрос 3
Верстальщик
Используйте flexbox
https://jsfiddle.net/dL4z65w2/66/
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
Если изображение контентное, что для подписи к нему есть пара специальных тегов figure и figcaption .
Там ничего не нужно изобретать, картинка и подпись сами встанут друг под другом.
(Если наоборот, картинка дополняет текст, например, изображение товара в инет магазине, то разметка будет другой. Название товара будет заголовком, дальше текст и т.д.)
Если картинка это украшение (иконка), то таких изображений не должно быть в разметке.
Они вставляются как фоны или псевдоэлементы через стили.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Так, кодирую по не многу.
Не знаю, может поможет 🙂
Суть в том что ты должен задать класс для одного общего контейнера, потом разместить картинки внутри этого контейнера. После чего уже нужно картинки обернуть еще одним div-контейнером и добавить span для текста. Затем в стилях в фале например style.css описать классы. Как отметил dethain можно использовать flexbox. что мы и сделали.
Flex /* но мы напишем стили тут. */ .__kakoy_to_class < display: flex; flex-wrap: wrap; width: 75%; margin: 0 auto; >.__item < width: 150px; height: 150px; margin: 20px; text-align: center; >.__kakoy_to_class img < width: 100%; height: auto; >.__item span 
Text Text Text Text Text Text Text Text Text Text Как мне отобразить текст под картинкой?
Вот что хочу сделать: три или более картинок с текстом под ними, которые будут выравниваться по горизонтали(в данном случае использую flex). Но я так понимаю, что тег начинает тоже выравниваться, так как без flex’a текст распологается под картинкой. Как мне сделать, чтобы картинки выровнились по горизонтали с текстом под ними? Ограничиваю эти блоки border’oм, и желательно чтобы были отступы от краёв сайта(margin-left/right/top).
Отслеживать
задан 19 мая 2019 в 13:38
Максим Калинин Максим Калинин
3 1 1 бронзовый знак
добро пожаловать на Stack Overflow на русском! текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса
19 мая 2019 в 13:41
Тут div получают флекс, как-бы. А он нужен только общему div. ему дается class=»flex» и дальше в CSS, .flex < display: flex; и прочее. >
Как сделать в HTML подпись под картинкой?
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
text — align : center ;
max — width : 200px ;
В моем случае это 200 пикселей.
С помощью селектора .frog p вы можете применить дополнительные стили к подписи.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
display : block ;
width : 200px ;
text — align : center ;
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.