Выравнивание и создание плавающих изображений с помощью CSS
С помощью align html изображения могут быть расположены и выровнены так, что будут находиться в определенном месте на странице. То, как вы хотите отобразить изображение, определяет, будете ли вы выравнивать изображение или сделаете его плавающим.
Выровненные изображения не обтекаются текстом вокруг них. Выравнивание будет размещать изображение слева, справа или по центру, а текст будет расположен до и после изображения. Выравнивание оставляет немного пустого места на сайте.
Плавающее изображение позволяет тексту обтекать себя, как в обычной книге или газете. Изображения могут быть размещены горизонтально. Это удобно для отображения изображений в виде галереи. Далее показано, как выравнивать и делать изображения плавающими с помощью 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.