Как сделать в html подпись под картинкой?
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<div class = «frog»> <img src = «frog.png»> <p>Лягушка</p> </div>
<div class = «frog»> <img src = «frog.png»> <p>Лягушка</p> </div> |
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
.frog p{ text-align: center; } .frog{ max-width: 200px; }
.frog p{ text-align: center; } .frog{ max-width: 200px; } |
В моем случае это 200 пикселей.
С помощью селектора .frog p вы можете применить дополнительные стили к подписи.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПо сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
<figure class = «frog»> <img src = «frog.png»> <figcaption>Лягушка</figcaption> </figure>
<figure class = «frog»> <img src = «frog.png»> <figcaption>Лягушка</figcaption> </figure> |
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
<img class = «frog» src = «frog.png»> <p>Лягушка</p>
<img class = «frog» src = «frog.png»> <p>Лягушка</p> |
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
.frog{ display: block; } .frog + p{ width: 200px; text-align: center; }
.frog{ display: block; } .frog + p{ width: 200px; text-align: center; } |
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьВставка подписи для рисунка — Служба поддержки Office
Функция вставки субтитров в Word – это большая часть тяжелой работы, когда вы хотите добавить подпись к рисунку. Для других приложений Office это немного сложнее и включает в себя Добавление текстового поля , а затем группировки надписи и рисунка. А если у вас несколько рисунков, вам придется вручную отслеживать их и увеличивать их значения.
Word
-
Щелкните рисунок, к которому вы хотите добавить подпись.
-
Щелкните ссылку > вставить заголовок.
-
Чтобы использовать метку по умолчанию (рисунок), введите ее в поле заголовок .
Совет: Вы также можете создать собственный заголовок по умолчанию, нажав кнопку создать метку, а затем добавив название в поле Метка . Word автоматически найдет новые наклейки.
Другие приложения Office
-
Добавьте надпись под картинкой или рядом с ее названием.
-
Щелкните надпись и введите текст, который вы хотите использовать для подписи.
-
Выберите изображение и надпись, а затем на вкладке Работа с рисунками | формат нажмите кнопку Группировать.
К началу страницы
Как сделать подпись под картинкой в HTML5
Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:
Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:
- тег «figure» создан для группировки HTML изображений и подписей под ними;
- тег «figcaption» создан для подписи под изображением.
Синтаксис:
<figure> <img src = "картинка"> <figcaption>Подпись к картинке </figcaption> </figure>
Пример:
<figure> <img src = "bloggood-ru.jpg"> <figcaption>Автор блога bloggood.ru </figcaption> </figure>
Результат:
Внешний вид, конечно, можно подправить, если использовать таблицу стилей CSS.
Добавьте вот такой стиль CSS:
figure {
border: 1px solid #ccc; /* рамка */
background-color: #f1f0f0; /* цвет фона */
padding: 5px; /* отступы от картинки */
width: 182px; /* ширина картинки */
}
figcaption {
text-align: center; /* подпись по центру*/
}
В результате получится вот такое:
Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта
Как добавить текст под картинкой в html?
В данной статье рассмотрим способы размещения текста под картинкой в html документе. Существует несколько разных вариантов как выполнить данную задачу.
Начнем с самого правильного и нового.
В html 5 добавлен новый тег <figure>. Данный тег используется для разметки независимого блока с демонстрационными материалами будь то, графики, изображения, куски кода и т.д.
Такие материалы сопровождаются подписями — комментариями разъясняющими информацию на изображении. Для этих целей используется тег <figcaption> который размещается внутри <figure> в начале или в конце.
Посмотрим на новые теги в действии.
<figure> <img src="up.png"> <figcaption>текст под картинкой</figcaption> </figure>
Внутри тега <figure> мы разместили картинку и подпись. Теперь применим CSS стили.
figure{
position: relative;
width: 300px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0 0 5px #999999;
}
.image figcaption{
padding: 15px 5%;
text-align: center;
}
/*если картинка больше чем 300px, то стоит добавить еще и эти стили*/
figure img{
width: 300px;
}
В итоге получаем картинку с размещенной подписью под ней.
текст под картинкой
Полный пример кода страницы с картинкой.
<html>
<body>
<head>
<style>
figure{
position: relative;
width: 300px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0 0 5px #999999;
}
figure img{
width: 300px;
}
.image figcaption{
padding: 15px 5%;
text-align: center;
}
</style>
</head>
<figure>
<img src="3.jpg">
<figcaption>текст под картинкой</figcaption>
</figure>
</body>
</html>
Переместив тег с описанием над картинкой, мы получим подпись над изображение.
Рассмотрим еще один способ добавления подписи под изображение с помощью html таблиц.
Создадим простую таблицу с двумя строками содержащих 1 ячейку.
<table> <tr><td><img src="kotik.png"></td></tr> <tr><td>текст под картинкой</td></tr> </table>
Применим стили для текста и изображения.
td{
text-align: center; // выравнивание текста по центру
}
td img{
width: 300px; // ширина картинки в ячейке
}
| текст под картинкой |
Данный способ так же имеет право на существование и даже много где используется, однако лучше использовать первый способ с <figure> и <figcaption>
Надеюсь , что статья была Вам полезна. До новых встреч!
Может быть полезно
Как добавить подписи к изображениям в WordPress
В этом руководстве для начинающих мы расскажем, как добавить подписи к изображениям в WordPress.
Для начала необходимо загрузить изображение. Затем в редакторе записи кликаем по иконке «Добавить блок» и выбираем блок «Изображение».
Кликнув по иконке, видим, что в области редактирования записи появился блок изображения.
Теперь загрузим изображение с компьютера на WordPress-сайт. Также можно выбрать ранее загруженные изображения, кликнув по кнопке библиотеки медиа файлов.
После добавления изображения, оно появится в редакторе вместе с текстовым блоком «Добавить подпись…», расположенным прямо под ним. Именно тут можно добавить подпись к изображению.
После внесения изменений сохраните пост, кликнув по кнопке «Опубликовать» или «Обновить».
В блочном редакторе WordPress также доступен блок «Галерея», в который можно добавлять несколько изображений и отображать их в виде сетки со строками и колонками.
Давайте посмотрим, как добавить подпись к изображениям в блоке «Галерея».
Для создания галереи переходим в редактор записи. Далее кликаем по иконке «Добавить блок» и выбираем «Галерея».
После этого блок галереи появится в области редактирования записи. Теперь можно поочередно загрузить необходимые изображения.
Если изображения загружаются последовательно, подписи к ним можно будет добавить после загрузки. После загрузки кликаем по нужному изображению и видим, что появляется поле «Добавить подпись».
При выборе изображений из медиа-библиотеки WordPress можно добавить подпись к картинкам, используя раздел метаданных, расположенный справа. Если у фотографий уже есть подписи, то нет необходимости добавлять их повторно.
В панели администрирования WordPress кликаем по вкладке «Медиафайлы» — «Добавить новый».
Здесь можно загрузить изображения, перетаскивая его мышкой или выбрав в проводнике компьютера. После загрузки файла переходим по ссылке «Изменить».
Далее откроется страница редактирования. Она схожа с редактором записи. Это связано с тем, что по умолчанию WordPress рассматривает вложения (например, изображения) как тип записи. Это позволяет сохранять метаданные изображений (название, описание и подписи) в базе данных WordPress.
Здесь можно редактировать название изображения и добавлять метаданные.
После добавления необходимой информации можно обновить изображения. Метаданные изображений будут сохранены в медиа-библиотеке.
Можно разместить изображение сразу в нескольких постах без необходимости повторно добавлять метаданные. Всякий раз при добавлении к записи изображения из медиа-библиотеки оно уже будет содержать сохраненные метаданные.
В старом версии редактора кликаем по кнопке «Добавить медиафайл», чтобы загрузить изображение или выбрать его из медиа-библиотеки.
После загрузки изображения введите его метаданные и добавьте к нему подпись.
Затем нажимаем кнопку «Вставить в запись», чтобы добавить изображение. Теперь в режиме предварительного просмотра в редакторе записей можно увидеть изображение с подписью. Сохраняем внесенные изменения.
Также можно добавить подписи к изображениям при создании галереи, используя старую версию редактора. Для этого загружаем изображения, затем кликаем по ссылке «Создать галерею», расположенную в колонке слева.
После этого необходимо кликнуть по кнопке «Создать новую галерею», расположенной справа внизу.
Теперь можно добавить подпись прямо под каждым изображением или кликнуть по изображению для загрузки его настроек в правой колонке и затем добавить подпись.
Чтобы добавить галерею в запись или на страницу WordPress, надо кликнуть по кнопке «Вставить галерею».
Надеемся, что данная статья помогла вам понять, как добавлять подписи к изображениям в WordPress.
Данная публикация представляет собой перевод статьи «How to Add Caption to Images in WordPress» , подготовленной дружной командой проекта Интернет-технологии.ру
Как подписать фото, как добавить надпись на фото?
Что бы добавить подпись на фото можно использовать программу Paint .
Программа Paint есть у всех. Как с помощью программы Paint я подписываю фото?
Выбираю фотографию для подписи на своем компьютере, делаю копию на всякий случай.
Выделяю выбранное фото с помощью правой кнопки мыши, во всплывшем меню выбираю пункт «открыть с помощью» навожу на него стрелкой мыши. Появляется еще одно окошко со списком программ, выбираю из списка программу Paint.
Мое фото открывается в программе Paint, можно его подписывать.
В программе Paint на панели инструментов нахожу большую букву «A» при наведение на нее мышкой всплывает подсказка «Текст» «Вставка текста в изображение»
Кликаю по букве «А» затем по тому месту на фото где будет надпись на фото, зажимаю левую кнопку мыши и рисую прямоугольник, в этом прямоугольнике будет надпись на фото.
Размер прямоугольник не сложно подстроить с помощью мышки.
На панели инструментов выбираю «прозрачный» или «непрозрачный» фон.
Так же выбираю шрифт и цвет, которым собираюсь подписать фото.
Когда закончил писать на фото — щелкаю мышкой по любому месту на фото (за пределами области, где надпись)
Готово, подписать фото удалось.
Нахожу в главном меню пункт «Сохранить как» и сохраняю подписанное фото, на компьютер, задав фото нужное имя.
Программу Paint можно открыть и из «Пуска» В нижнем левом углу рабочего стола.
Просто начав вбивать слово Paint в строку поиска…
Подрисуночная подпись | WebReference
Подрисуночная подпись — это текст, который является комментарием к рисунку и его описывает. Такая подпись важна, поскольку она привлекает внимание читателя к иллюстрации и даёт больше информации об изображении. У элемента <img> существует, конечно, атрибут title, который задаёт текст всплывающей подсказки, но чтобы её получить, приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и, соответственно, более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться сверху или сбоку от рисунка, если это продиктовано соображениями вёрстки и дизайна (рис. 1).
Рис. 1. Варианты размещения подрисуночной подписи
Для размещения на веб-странице и рисунка, и подписи к нему удобно воспользоваться элементами <figure> и <figcaption>, а через стили задать параметры рисунка, а также расположение текста (пример 1).
Пример 1. Создание подрисуночной подписи
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
<style>
figure {
display: inline-block; /* Выстраиваем по горизонтали */
background: #85ab6f; /* Цвет фона */
padding: 10px; /* Поля */
margin: 0 1em 0 0; /* Отступ справа */
vertical-align: top; /* Выравниваем по верхнему краю */
}
figcaption {
text-align: center; /* Выравниваем по центру */
}
figure.right figcaption {
float: right; /* Добавляем текст справа */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<figure>
<img src="image/fig1.jpg" alt="">
<figcaption>Подпись снизу</figcaption>
</figure>
<figure>
<figcaption>Подпись сверху</figcaption>
<img src="image/fig2.jpg" alt="">
</figure>
<figure>
<figcaption>Подпись справа</figcaption>
<img src="image/fig3.jpg" alt="">
</figure>
</body>
</html>Для изменения положения текста — сверху или снизу изображения, достаточно просто поменять местами элементы <img> и <figcaption>. Для размещения сбоку применяем свойство float к селектору figcaption, но надо помнить, что это свойство воздействует на все нижележащие элементы тоже.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
