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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для создания иллюстрации с подписью, в HTML5 включен новый элемент решаюший эту задачау - figure. Рассмотрим пример.

Исходный HTML документ:

<figure>
  <figcaption>Рисунок №1.</figcaption>
  <img  src="1.jpg" alt="Wave">
</figure>

Стили:

figure {
  /* задаём рамку и внутренние отступы для контента */
  border: 1px solid #245488;
  padding: 10px;
  /* минимальная ширина блока, после которой не происходит масштабирование */
  min-width: 250px;
}

figcaption {
  /* тэг идет первым в блоке - подпись будет сверху */
  /* выравнивание по центру, и изменим фон */
  text-align: center;
  background-color: #bac8d6;
}

img {
  /* картинка займет всю доступную ширину блока figure*/
  width: 100%;
}

Результат:

3 года назад

Вячеслав Межуревский

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

Похожие вопросы