Выравнивание и создание плавающих изображений с помощью CSS

При помощи align html картинки могут быть расположены и выровнены так, что будут находиться в определенном месте на странице. То, как вы планируете отобразить изображение, определяет, будете ли вы выравнивать изображение или сделаете его плавающим.

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

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

Выравнивание слева, справа и по центру

Картинки могут быть выровнены слева, справа и по центру при помощи тега div и встроенного стиля CSS. Текст не обтекает картинки, для контейнеров которых применено свойство HTML text align.

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

Программный код, приведенный ниже, выравнивает изображение по левому краю:

<div style="text-align: left"><img src="/support/image/your-image.png" width="100" /></div>
Выравнивание и создание плавающих картинок при помощи CSS

Выравнивание по центру

Следующий программный код предназначен для центрирования картинки:

<div style="text-align: center"><img src="/support/image/your-image.png" width="100" /></div>
Выравнивание и создание плавающих картинок при помощи CSS

Выравнивание по правому краю

Следующий код включает CSS для выравнивания по правому краю(HTML align right):

<div style="text-align: right"><img src="/support/image/your-image.png" width="100" /></div>
Выравнивание и создание плавающих картинок при помощи CSS

Плавающие картинки с использованием CSS

Создание плавающих картинок может расположить картинки по горизонтали. При этом текст будет обтекать картинки.

Обтекание картинки текстом слева

<img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />

Выравнивание и создание плавающих картинок при помощи CSS Важно! Плавающие картинки будут накладываться друг на друга, если свойство 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" />
Выравнивание и создание плавающих картинок при помощи CSS

Размещение картинок по горизонтали

Здесь будет использоваться тот же код align HTML, что и раньше(смотрите ниже). Картинки просто размещаются одно за иным, чтобы сделать выравнивание по горизонтали:

<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />

Выравнивание и создание плавающих картинок при помощи CSS Плавающие картинки, размещенные друг за ином, это отличный метод отобразить картинки в виде галереи. На этом мы заканчиваем статью о том, как выравнивать и размещать картинки при помощи CSS.

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

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