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

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

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

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

Решение

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

Подпись картинки (теги figure и figcaption) | HTML

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

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

Кроме содержания атрибутов 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.
А ниже, после
<figure />,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

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

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

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

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

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

Подрисуночная подпись &#8212; контент, являющийся названием рисунка, комментарием к нему или описанием Имаги. Такая подпись важна, поскольку привлекает внимание читателя к рисунку и дает больше информации об изображении. У тега <IMG> существует, конечно, параметр title , который задает контент подсказки, но чтобы ее получить приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и соответственно более предпочтительный заключается в размещении подрисуночной подписи возле самого Имаги. Подпись хоть и имеется ввиду подрисуночной, но может располагаться и сбоку от рисунка, если это продиктовано соображениями верстки и дизайна.

Подпись под рисунком

просмотрим простой вариант, когда подпись располагается прямо под изображением (рис. 1). При этом сама картинка и контент к ней размещаются в прямоугольнике с рамкой и фоном.

Рис. 1. Вид подрисуночной подписи

Изображение и подпись к нему добавляются с помощью тега абзаца <P> , управление которым, в частности, выравнивание контента, его цвет и шрифт задается через стили. Подпись при этом отделяется от рисунка тегом <BR> (пример 1). Чтобы стиль абзаца с подрисуночной подписью не пересекался с рядовым абзацем, создадим новый класс fig , и будем добавлять его при необходимости к тегу <P> .

Пример 1. Подпись под рисунком

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01//EN» «http://www.w3.org/TR/ШТМЛ4/strict.dtd»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Подрисуночная подпись</title>
<style type=»text/CSS (ЦСС)»>
p. fig <
color: #800000; /* Цвет контента */
font-style: italic; /* Курсивное начертание */
text-align: center; /* Выравнивание по центру */
line-height: 25px; /* Межстрочное расстояние */
>
</style>
</head>
<body>
<p > <img src=»figure.jpg» alt=»Винни-Пух в гостях у Кролика»><br>
Винни-Пух в гостях у Кролика</p>
</body>
</html>

Выравнивание Имаги и контента по центру происходит с помощью стилевого параметра text-align со значением center . Расстояние от Имаги до контента управляется тегом line-height , его значение подбирается опытным путем, в зависимости от собственных предпочтений.

Использование соседних селекторов

Перенос строки с помощью тега <BR> делать не обязательно, допустимо картинку поместить в один контейнер <P>, а подпись &#8212; в другой. Чтобы определить стиль именно для второго абзаца воспользуемся соседними селекторами. Они записываются как p. fig+p.fig, что означает применять стиль только для абзаца с классом fig, но только когда он идет после такого же абзаца (пример 2).

Пример 2. Соседние селекторы

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01//EN» «http://www.w3.org/TR/ШТМЛ4/strict.dtd»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Подрисуночная подпись</title>
<style type=»text/CSS (ЦСС)»>
p.fig <
text-align: center; /* Выравнивание по центру */
font-style: italic; /* Курсивное начертание */
>
p.fig img <
border: 1px solid #333; /* Рамка вокруг Имаги */
>
p.fig + p.fig <
margin-top: -1em; /* Второй абзац поднимаем вверх */
>
</style>
</head>
<body>
<p src=»figure.jpg» alt=»Винни-Пух в гостях у Кролика»></p>
<p в гостях у Кролика</p>
</body>
</html>

В данном примере активно применяются теги <P> , поэтому для разделения стиля обычного абзаца вводится класс fig . Соседние селекторы нужны для регулирования расстояния между картинкой и контентом под ней. Это осуществляется параметром margin-top с отрицательным или положительным аргументом, что зависит от желаемой дистанции.

Соседние селекторы поддерживаются браузером Internet Explorer только начиная с версии 7.

Рисунок и подпись в рамке

Чтобы отделить рисунок от основного контента, дастаткова поместить изображение с подписью в рамку с фоном, как показано на рис. 2.

Рис. 2. Вид подрисуночной подписи в рамке

Для разработки такой подписи используем тег <DIV> , он выступает в качестве контейнера, в который помещаем изображение через тег <IMG> , а подпись к нему &#8212; с помощью тега <P> . Для каждого элемента такой конструкции можно установить свои стилевые параметры, что позволяет гибко настроить ее вид. Единственная особенность &#8212; требуется задать ширину всего блока в пикселах или процентах через атрибут width , как показано в примере 3.

Пример 3. Подпись под рисунком в рамке

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01//EN» «http://www.w3.org/TR/ШТМЛ4/strict.dtd»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Подрисуночная подпись</title>
<style type=»text/CSS (ЦСС)»>
.pic <
border: 1px solid #333; /* Граница вокруг блока */
background-color: #f0f0f0; /* Цвет фона */
color: navy; /* Цвет подписи */
padding: 10px; /* Поля вокруг содержимого */
width: 250px; /* Ширина блока */
text-align: center; /* Выравнивание контента по центру */

position: relative; /* Относительное позиционирование */
left: 50%; /* Выравниваем блок по центру */
margin-left: -125px; /* Сдвигаем блок влево на половину его ширины */
>
.pic img <
border: 1px solid #333; /* Рамка вокруг Имаги */
>
.pic p <
margin: 0; /* Убираем отступы вокруг абзаца */
padding-top: 5px; /* Расстояние от рисунка до контента */
>
</style>
</head>
<body>
<p>- Ну, — замялся Пух, — я мог бы побыть еще немного, если бы ты. если бы у тебя. — запинался он и при этом почему-то не сводил глаз с буфета.<br>
— По правде говоря, — сказал Кролик, — я сам собирался пойти погулять.<br>
— А-а, ну хорошо, тогда и я пойду. Всего хорошего.<br>
— Ну, всего хорошего, если ты больше ничего не хочешь.</p>

<div > <img src=»figure.jpg» alt=»Винни-Пух в гостях у Кролика»>
<p>Винни-Пух в гостях у Кролика</p>
</div>

<p>- А разве еще что-нибудь есть? — с надеждой спросил Пух, снова оживляясь. Кролик заглянул во все кастрюли и банки и со вздохом сказал:<br>
— Увы, совсем ничего не осталось!<br>
— Я так и думал, — сочувственно сказал Пух, покачав головой. — Ну, до свиданья, мне пора идти.</p>
</body>
</html>

Выравнивать блок с рисунком и подписью по центру можно разными способами. В данном примере применяется относительное позиционирование со сдвигом вправо на 50%. Поскольку отсчет координат ведется от левого края слоя, то переноса на 50% недастаткова, чтобы точно расположить слой по центру. Поэтому еще требуется сместить слой влево на половину его ширины за счет margin-left с отрицательным значением.

Подпись справа от рисунка

Иногда по соображениям дизайна или макета подпись к рисунку необходимо разместить слева или справа от Имаги. Для этой цели удобнее применить таблицей с невидимой границей. Благодаря наличию большого числа параметров у тега <TD>, в частности align и valign, подпись можно выравнивать по верхнему, нижнему краю или центру картинки.

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

Чтобы контент располагался справа, для тега <IMG> требуется установить свойство float со значением left . Оно задает выравнивание по левоой стороне и, соответственно, обтекание контентом по правому. Но этого недастаткова, высота блока в этом случае формируется по контенту, а не изображению, что портит всю работу. Поэтому обтекание надо отменить и сделать это требуется после рисунка и контента, воспользовавшись стилевым тегом clear , например, добавив <br> . В примере 4 показан альтернативный вариант отмены обтекания с помощью пустого контейнера <DIV> .

Пример 4. Подпись справа от рисунка

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01//EN» «http://www.w3.org/TR/ШТМЛ4/strict.dtd»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Подпись справа от рисунка </title>
<style type=»text/CSS (ЦСС)»>
.pic <
border: 1px solid #333; /* Граница вокруг блока */
background-color: #f0f0f0; /* Цвет фона */
color: navy; /* Цвет подписи */
padding: 10px; /* Поля вокруг содержимого */
width: 250px; /* Ширина блока */
>
.pic img <
border: 1px solid #333; /* Рамка вокруг Имаги */
float: left; /* Обтекание по правой стороне */
margin-right: 7px; /* Расстояние между рисунком и контентом */
>
. pic p <
margin: 0; /* Убираем отступы вокруг абзаца */
padding-top: 20px; /* Поле сверху */
>
.pic div <
clear: left; /* Отменяем обтекание */
>
</style>
</head>
<body>
<div > <img src=»figure.jpg» alt=»Винни-Пух в гостях у Кролика»>
<p>Винни-Пух в гостях у Кролика</p>
<div></div>
</div>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Подпись справа от Имаги

При использовании параметра float элементы выравниваются по верхнему краю, поэтому в данном примере для абзаца добавлено поле сверху ( padding-top ), оно позволяет несколько сместить контент вниз.

Как сделать подпись под картинкой в 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, XHTML и CSS на 100%

Расстояние между текстом и изображением. HTML, XHTML и CSS на 100%

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

Содержание

Расстояние между текстом и изображением

Расстояние между текстом и картинкой влияет на читаемость текста. Очень маленькое или очень большое расстояние может оказаться неудобным.

Чтобы отодвинуть текст от картинки, используют атрибуты hspace и vspace элемента IMG. Они задают расстояние в пикселах между изображением и текстом по горизонтали и вертикали.

В листинге 4.5 указано очень большое расстояние по вертикали (100 пикселов) и очень маленькое по горизонтали (1 пиксел). На рис. 4.5 видно, что такое сочетание расстояний неудобно для чтения.

Рис. 4.5. Задано расстояние от картинки до текста

Листинг 4.5. Задание расстояния от текста до изображения

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src=»image.jpg» align=»right» vspace=»100″ hspace=»1″/>Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки.

Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их. <br/> </body>

</html>

Данный текст является ознакомительным фрагментом.

Расстояние между буквами

Расстояние между буквами Расстояние между буквами можно задать свойством letter-spacing. В качестве значения указываются необходимая величина и абсолютная единица измерения.Для нашего примера зададим расстояние между буквами в заголовке шириной 6 пикселов:h2 {letter-spacing:

Расстояние между словами

Расстояние между словами Можно задать расстояние как между буквами, так и между словами, используя свойство word-spacing. В качестве значения вы можете указать желаемое значение либо normal, чтобы использовать значение браузера по умолчанию.Это свойство не представляет

Работа с текстом

Работа с текстом pdf_showВывод текста в текущую позицию.Синтаксис:void pdf_show(int pdf_document, string text)Для вывода используются текущая позиция и текущий шрифт.pdf_show_boxedВывод текста в прямоугольную область.Синтаксис:void pdf_show_boxed(int pdf_document, string text, double x, double y, double width, double height, string mode [, string

Расстояние между словами

Расстояние между словами Вы можете регулировать расстояние между словами с точностью до слова.Слова на расстоянии в несколько словВы можете указать максимально допустимое расстояние между двумя любыми словами запроса, поставив после первого слова символ / и сразу за

Формирование точек методом «направление – расстояние»

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

Работа с текстом

Работа с текстом В AutoCAD можно создавать текст двух видов:• команды DTEXT и TEXT позволяют сформировать однострочный текст;• с помощью команды MTEXT создается многострочный текст, представляющий собой текстовый блок, состоящий из произвольного количества строк и абзацев.

Работа с текстом

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

Часть III Простейшие операции с изображением

Часть III Простейшие операции с изображением В третьей части книги мы изучим простейшие операции с изображением, которые позволят нам работать с файлами Adobe Photoshop.

Новых знаний еще не будет достаточно, чтобы создавать собственный дизайн, – однако они подготовят нас к тому,

Формирование точек методом «направление – расстояние»

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

Особенности кодирования литеральных символов и пар расстояние/длина

Особенности кодирования литеральных символов и пар расстояние/длина В предыдущих разделах ничего не было сказано о небольшом нюансе реализации алгоритма: как в процессе считывания сжатых данных отличить литеральный символ от кода расстояние/длина? В конце концов, не

Формирование точек методом «направление – расстояние»

Формирование точек методом «направление – расстояние» Вместо ввода координат допускается использование прямой записи расстояния , что особенно удобно для быстрого ввода длины линии.

Такой ввод может производиться во всех командах, кроме тех, которые предполагают

Работа с текстом

Работа с текстом Говорят, что изображение стоит тысячи слов. Линии, дуги и круги на рисунке могут передать много графической информации, однако в конце работы вам нужно снабдить рисунки примечаниями, чтобы полностью передать замысел.Текст на рисунке соотносится с

Работа с текстом

Работа с текстом В случае применения Photoshop для обработки изображений при последующем использовании их в научной работе необходимо научиться добавлять к изображению текст – различные надписи и выноски, с помощью которых можно как минимум поместить подпись под

2.4. Управление изображением модели

2.4. Управление изображением модели Для управления масштабом изображения модели предназначены команды Увеличить масштаб рамкой, Увеличить масштаб, Уменьшить масштаб, Масштаб по выделенным объектам, Приблизить/отдалить, Показать все. Эти команды расположены в меню Вид, а

Фокусное расстояние и объективы

Фокусное расстояние и объективы Разные объективы имеют разное фокусное расстояние, то есть промежуток от оптического центра объектива до плоскости матрицы. Фокусное расстояние измеряется в миллиметрах. Главное Фокусное расстояние определяет угол обзора объектива.

4.6.2. Действия с изображением в целом

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

html — Как выровнять текст под изображением в CSS?

Спросил 8 лет, 6 месяцев назад

Изменено 10 месяцев назад

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

HTML

 

       png" alt="Экран 1"/>
      
      
  
 

Если я добавляю текст абзаца между img1 и img2, они разделяются (img2 переходит на новую строку)

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

 [изображение1] [изображение2] [изображение3]
 [текст] [текст] [текст]
 

Я не дал изображениям их собственные имена классов, потому что изображения не выровнены друг относительно друга по горизонтали.

• HTML
• CSS

1

Добавьте контейнер div для изображения и подписи:

 

    
    Текст под изображением

 

Затем с помощью CSS вы можете создать галерею изображений с автоматическим переносом:

 div.item {
    вертикальное выравнивание: сверху;
    отображение: встроенный блок;
    выравнивание текста: по центру;
    ширина: 120 пикселей;
}
картинка {
    ширина: 100 пикселей;
    высота: 100 пикселей;
    цвет фона: серый;
}
. подпись {
    дисплей: блок;
}
 

 раздел.элемент {
    /* Чтобы правильно выровнять изображение, независимо от высоты содержимого: */
    вертикальное выравнивание: сверху;
    отображение: встроенный блок;
    /* Для горизонтального центрирования изображений и подписи */
    выравнивание текста: по центру;
    /* Ширина контейнера также подразумевает поля вокруг изображений. */
    ширина: 120 пикселей;
}
картинка {
    ширина: 100 пикселей;
    высота: 100 пикселей;
    цвет фона: серый;
}
.подпись {
    /* Сделать заголовок блоком, чтобы он занимал отдельную строку. */
    дисплей: блок;
} 

 <дел>
    
    Текст под изображением