Как сделать текст слева от картинки в css
Перейти к содержимому

Как сделать текст слева от картинки в css

  • автор:

HTML изображение и текст

Посмотрим, как разместить текст слева или справа изображения.

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом и особенностями его взаимодействия с элементами текста.

Навигация по странице

  1. Текст вверху, внизу, по центру изображения на HTML странице сайта
  2. HTML изображение слева – текст справа
  3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения



HTML текст вверху, внизу, по центру изображения

Текст вверху изображения

Текст по центру изображения

Текст внизу изображения


HTML текст. Текст вверху, внизу, по центру изображения

Атрибуты и значения

  • align=»top» – выравнивает изображение и текст по верху.
  • align=»middle» – выравнивает изображение и текст по центру, по вертикали.
  • align=»bottom» – выравнивает изображение и текст по низу.

Н апомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

HTML изображение слева – текст справа



HTML изображение слева – текст справа

Изображение обтекает текст слева

Изображение обтекает текст слева

Изображение обтекает текст слева

Изображение обтекает текст слева


HTML текст. Изображение слева - текст справа

HTML изображение справа – текст слева



HTML изображение справа – текст слева

Изображение обтекает текст справа

Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа


HTML текст. Изображение справа - текст слева

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение HTML изображение, текст HTML верстка сайта

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML изображение, текст? – Не вопрос!

Выравнивание картинок

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

Обтекание изображения текстом

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

Для обтекания картинки текстом применяется стилевое свойство float . Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float , обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.

Пример 1. Применение float

Изображения

Подпись снизу

Текст

В данном примере вводится два класса с именами left и right , добавление которых к элементу или выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin . На рис. 1 показано выравнивание по левому краю.

Выравнивание фотографии по левому краю

Рис. 1. Выравнивание фотографии по левому краю

Выравнивание рисунка относительно текста

Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align . По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).

Базовая линия

Рис. 2. Базовая линия

Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).

Картинка, выровненная по базовой линии текста

Рис. 3. Картинка, выровненная по базовой линии текста

В примере 2 все изображения внутри абзаца

выравниваются посередине текста, для этого в качестве значения применяется middle .

Пример 2. Выравнивание картинки относительно текста

Изображения p img

Вид самой кривой изменяется с помощью инструмента карандаш . Для создания прямых отрезков устанавливайте точки удерживая клавишу Shift.

Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.

Картинка, выровненная по середине текста

Рис. 4. Картинка, выровненная по середине текста

См. также

  • float
  • float в CSS
  • vertical-align
  • Атрибуты элементов
  • Блочные элементы
  • Буквица
  • Верхний и нижний индекс
  • Влияние float
  • Добавление медиа-контента
  • Изображения
  • Изображения
  • Изображения в Bootstrap 5
  • Изображения в HTML
  • Масштабирование картинок
  • Описание float
  • Подрисуночная подпись
  • Подробнее о позиционировании
  • Поток
  • Примеры использования float
  • Строчные элементы
  • Фон в CSS
  • Форматы графических файлов

картинка слева текст справа

вот никак не получается

Администратор

10 года 1 мес. назад #6294 от Wedal

San4ozzZ, применить к картинке CSS-стиль: float:left.

Спасибо сказали: San4ozzZ

San4ozzZ / Автор темы \

Web-Эксперт

10 года 1 мес. назад #6308 от San4ozzZ

  1. Форум
  2. Шаблоны Joomla.
  3. HTML и CSS
  4. картинка слева текст справа

© Web-мастерская Wedal’a.
ИНН: 550315729868 ОГРНИП: 319554300091489
2009-2024. Все права защищены. Политика конфиденциальности
В случае перепечатки материалов активная ссылка на Wedal.ru обязательна!

Как сделать картинку слева, а справа заголовок и текст?

5d248cc383135875775780.png

Как сделать вот такое расположение в блоке?

  • Вопрос задан более трёх лет назад
  • 901 просмотр

1 комментарий

Простой 1 комментарий

2cha.headz @glagolew059

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

 

Ubability

text

.megablock .megablock:before < position: absolute; content:''; display:block; width: 50px; height: 50px; left:10px; top:10px; background-position: center center; background-size:contain >.diamond:before

ps написал для примера, даже не тестил))

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *