Как выравнивать и размещать плавающие изображения с помощью CSS: примеры и приёмы
Выравнивание и плавающие изображения требуют понимания float, обтекания, центрирования и приёмов для горизонтальных рядов с учётом адаптивности. Руководство описывает варианты обтекания слева и справа, методы центрирования и приёмы для создания ряда изображений без ломки верстки.
Вы разберётесь с практическими приёмами размещения изображений в адаптивной вёрстке. В результате получите набор конкретных техник для корректного размещения и обтекания в разных макетах.
Введение
Выровненные изображения не обтекаются текстом вокруг них. Выравнивание будет размещать изображение слева, справа или по центру, а текст будет расположен до и после изображения. Выравнивание оставляет немного пустого места на сайте.
Плавающее изображение позволяет тексту обтекать себя, как в обычной книге или газете. Изображения могут быть размещены горизонтально. Это удобно для отображения изображений в виде галереи. Далее показано, как выравнивать и делать изображения плавающими с помощью CSS.
Выравнивание слева, справа и по центру
Изображения могут быть выровнены слева, справа и по центру с помощью тега div и встроенного стиля CSS. Текст не обтекает изображения, для контейнеров которых применено свойство HTML text align.
Выравнивание по левому краю
Код, приведенный ниже, выравнивает изображение по левому краю:
<div style="text-align: left"><img src="/support/image/your-image.png" width="100" /></div>
Выравнивание по центру
Следующий код предназначен для центрирования изображения:
<div style="text-align: center"><img src="/support/image/your-image.png" width="100" /></div>
Выравнивание по правому краю
Следующий код содержит CSS для выравнивания по правому краю (HTML align right ):
<div style="text-align: right"><img src="/support/image/your-image.png" width="100" /></div>
Плавающие изображения с использованием CSS
Создание плавающих изображений позволяет расположить изображения по горизонтали. При этом текст будет обтекать изображения.
Обтекание изображения текстом слева
<img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Важно! Плавающие изображения будут накладываться друг на друга, если свойство float не очищено. Убедитесь, что вы размещаете код для очистки float после каждой секции, в которой располагается ваше изображение. Ниже приведен код для сброса значения свойства float:
<br style="clear:both" />Вот пример:
<p><img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.
<br style="clear: both;" /></p>Обтекание текстом изображения справа
<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Размещение изображений по горизонтали
Здесь будет использоваться тот же код align HTML, что и раньше (смотрите ниже). Изображения просто размещаются одно за другим, чтобы сделать выравнивание по горизонтали:
<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Плавающие изображения, размещенные друг за другом, это отличный способ отобразить изображения в виде галереи. На этом мы заканчиваем статью о том, как выравнивать и размещать изображения с помощью CSS.
Комментарии