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

html — Как расположить три картинки вряд с подписью снизу?

Задать вопрос

Вопрос задан 2 года 3 месяца назад

Изменён 2 года 2 месяца назад

Просмотрен 1k раз

Ума не приложу, как это сверстать:

Что бы я не делал, картинки либо встают колонками, либо встают вряд, но текст, который должен быть внизу, находится сбоку от картинок:

.features-block {
  position: relative;
  display: block;
  box-sizing: border-box;
  span {
    float: left;
  }
}

<div>
  <div>
    <span>
        <picture>
            <img src="img/main-features/1.png" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="img/main-features/2.  png" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="img/main-features/3.png" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

• html
• css
• выравнивание

Это достаточно просто сделать при помощи:

Grid

.image {
 display: grid;
 grid-template-columns: max-content max-content max-content;
 align-items: center;
 justify-content: space-around;
}
.features-block span {
  display: grid;
  justify-items: center;
}
.features-block span img {
  width: 30px;
  height: auto;
}

<div>
  <div>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.
  picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

или

Flex

.image {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.features-block span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.features-block span > picture {
  margin: auto;
}
.features-block span img {
  width: 30px;
  height: auto;
}

<div>
  <div>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i. picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
}
.image {
  display: flex;
  justify-content: space-around;
}
.image>span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image>span>*:not(:last-child) {
  margin-bottom: 15px;
}

<div>
  <div>
    <span>
        <img src="https://picsum.photos/50/50" alt="">
        <p>text</p>
    </span>
    <span>
        <img src="https://picsum. photos/50/50" alt="">
        <p>text</p>
    </span>
    <span>
        <img src="https://picsum.photos/50/50" alt="">
        <p>text text</p>
    </span>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

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

Решение

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Для блока используется тег <figure> , а для подписи к изображению тег <figcaption> . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.

Рис. 1. Фотография с подписью, выровненная по правому краю страницы

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.

От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.

Самый примитивный вариант

Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.

Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.

Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.

Соединение изображения и подписи в блок

Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:

В моем случае это 200 пикселей.

С помощью селектора .frog p вы можете применить дополнительные стили к подписи.

Использование тега figure

Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:

Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.

Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку

В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.

Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:

Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.

Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.

Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.

Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:

Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:

• тег « figure » создан для группировки HTML изображений и подписей под ними;
• тег « figcaption » создан для подписи под изображением.

Синтаксис:

Внешний вид, конечно, можно подправить, если использовать таблицу стилей CSS.
Добавьте вот такой стиль CSS:

В результате получится вот такое:

Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.

Внимание! Статья на переработке. Прежний вариант был перенесён сюда в связи с более подходящим заголовком.

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

Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как: Когда-нибудь котёнок выберется из лужи

Автоматическая нумерация картинок

Изображение с подписью в рамке

Общий CSS стиль:

Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока. Когда-нибудь котёнок выберется из лужи

Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!). Когда-нибудь котёнок выберется из лужи

Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания. Длинное, очень длинное, длинное-предлинное описание

HTML подпись под картинкой, появляющаяся после наведения курсора мышки

К CSS выше добавить: Когда-нибудь котёнок выберется из лужи

Несколько фотографий и одно описание

Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3. org. Словом, так тоже будет верно: Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

Появление подписи картинки при наведении на неё курсора мышки

14 комментариев:

Анонимный есть ли возможность автоматом проставлять теги alt и title для изображений в блоггере ? NMitra Я такого способа не знаю и поскольку всё равно пишу всё на вкладке «Изменить HTML», то добавление alt не вызывает у меня неудобства. Любопытно то, что в нескольких местах шаблона, например, в заголовке при использовании изображения, всё же данный атрибут применяется. Анонимный Хм, а если изображений 10-к или более на статью? Жуть. Раньше мне было все равно, но недавно стал юзать фоторекламу на блоге.
Жаль что этого не хотят решить разработчики Блоггера. NMitra Вот у меня тоже такое впечатление, что именно не хотят, а не не могут. Поскольку некоторые другие функции, которые добавленные в блог, удивляют. Анонимный 1 Olga Я сделала шапку блога в xHeader,картинку (часть картинки)я взяла на бесплатных изображениях,т. е.мне ее прописывать не надо. Как правильно записать HTML код, как будут просаны теги alt и title NMitra Если вы про http://3.bp.blogspot.com/-pI5NALFNY14/T0jg92DlVrI/AAAAAAAAAGg/QgQrIsLaKns/s1600/suberb%2B2%2B%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0%2B2.jpg , то она является фоновым изображением, прописана через стили, alt и title не требуются. Svetlana Kuzmina Добрый день! Я только начинающий блоггер, подскажите, пожалуйста, КАК сместить картинку в заголовке блога, чтобы она была СПРАВА? Заранее спасибо за помощь!
http://stylistjournal.blogspot.ru/ NMitra Добрый день. Справа от чего? Картинку нужно ужать?
Svetlana Kuzmina Наталья, спасибо, разобралась. Irina Sanirio Хочу, чтобы все изображения в блоге имели простую рамку с тенью и подпись находилась в рамке. Скопировала первый код из «Изображение с подписью в рамке», вставила в шаблон (в CSS). Не работает. NMitra То что в style — эту часть нужно вставить туда где CSS.
А ниже, после

,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

Сначала потренируйтесь, весь код целиком добавьте в сообщение на вкладке HTML.

Я пишу всю статью с включенным режимом HTML, мне не составит труда пару строк. А вам не думаю, что будет сподручно каждый раз переключаться. BUTAMUHbI4 «Когда-нибудь котёнок выберется из лужи». Тут смысл более широкий, чем кажется на самом деле. Образы слов следующие:

«котёнок» — это ребёнок, а в некоторых случаях и более объемлющее значение: человек.
«лужа» — это психологические (и только, т.к. всё остальное пляшет от психики человека) рамки, в которые загоняют котёнка с момента его появления на свет (и хуже всего то, что в большей степени это делают его родители на подсознательном уровне, т.к. сами росли в таких же рамках).

Отсюда рождается следующее:
Зачем загонять котёнка в лужу самОй постановкой изначального предложения? Ведь даже неоднозначное наречие «когда-нибудь» уже внедряет в подсознание котёнка возможность «вечного» пребывания в луже, т. к. есть вариант, что «когда-нибудь» никогда не случится (котёнок может просто умереть несколько раньше)..

Подпись под картинкой — HTML, CSS
Здравствуйте. Начал оформлять свои заметки на сайте на платформе ucoz и столкнулся с проблемой, что мне нужно сделать подпись к.

Ютьюб-вставка над всплывающей картинкой — HTML, CSS
Здравствуйте, когда изображение всплывает, вставка над окном, как сделать так, чтобы плеер ютьюбовский был под окном? Сам сайт

Текст под картинкой — HTML, CSS
Всем привет!! Ходил по поиску но к сожалению не нашел решения. Мне нужно чтоб под картинкой по средине был текст.Но фишка в том что я.

Текст под картинкой — HTML, CSS
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И сказали чтобы я выложил его на каком-нибудь хостинге. С выбором.

Текст под картинкой — HTML, CSS
Сайт — anichan.moy.su/load/anime_serialy/dnevnik_budushhego_mirai_nikki/2-1-0-2 Как сделать так, чтобы текст справа, сразу после.

Меню выводится под картинкой — HTML, CSS
Возникла проблема меню выводится не так как бы хотелось, то есть плохо так как показано на скрине (добавлен ниже), а хотелось чтобы когда я.

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Для блока используется тег , а для подписи к изображению тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.

Рис. 1. Фотография с подписью, выровненная по правому краю страницы

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.

В этой заметке я расскажу, как добавить красивую подпись к картинке, чтобы получилось нечто подобное:

Готовый пример кода и посмотреть результат вы можете в листинге. А ниже даны некоторые пояснения (скобки в CSS указывают на номер пункта в пояснении).

Узнайте о HTML-теге figcaption и создайте HTML-подпись к изображению

Код добавлен в буфер обмена!

Время чтения 1 мин

Опубликовано 19 марта 2019 г.

Обновлен 1 октября 2019 г.

Содержание

• 1. HTML Figcaption: Основные советы
• 2. Использование Figcation
• 3. Броузер figcaption: основные советы
  • HTML-элемент
  • Элемент

     содержит как

  Плюсы

  • Упрощенный дизайн (без лишней информации)
  • Качественные курсы (даже бесплатные)
  • Разнообразие функций

  Основные возможности

  0014
  • Suitable for enterprises
  • Paid certificates of completion

  EXCLUSIVE: 75% OFF

  Pros

  • Easy to navigate
  • No technical issues
  • Seems to care about its users

  Main Features

  • Большое разнообразие курсов
  • 30-дневная политика возврата средств
  • Бесплатные сертификаты об окончании

  ОТ 12,99$

  Pros

  • Great user experience
  • Offers quality content
  • Very transparent with their pricing

  Main Features

  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

  75% СКИДКА

  Использование figcaption