Выравнивание картинки по правому и левому краям в css

В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами css на сайте.

Содержание статьи

Как выровнять картинку по правому краю в css

Для выравнивания изображения по правому краю используется свойство "float:right". Свойство float меняет вид отображения картинки(или другого элемента) на блочный, но с особенностями: она становится невидимой для других блочных элементов, но при этом сохраняет видимость для строчных (display:inline), которые ее обтекают.

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

Когда картинка сместилась, то текст и прочие элементы начинают ее обтекать вплотную и во многих случаях это выглядит некрасиво, поэтому добавляют отступы с помощью свойства "margin y1 x1 y2 x2". Значения "y1 x1 y2 x2", это отступы сверху, справа, снизу и слева соответственно.

Некорректное отображение плавающих float элементов

Как писалось выше, плавающие элементы float не учитываются т. к. являются невидимыми для блочных тегов, поэтому возможно некорректное отображение:

1 случай: элемент float выходит за границы родительского слоя.


2 случай: Заголовок и другое содержание в блочном элементе отображается не с новой строки, а начинает обтекать вышестоящий с типом float.





Как исправить некорректное отображение плавающих float элементов

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

В css есть свойство clear отвечающее за запрет обтекания плавающих элементов типа float. Свойство clear смещает элемент сразу под плавающий, тем самым задавая нижнюю границу и расширяя при необходимости родительский блок до окончания всех тегов типа float.

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

Свойство clear может принимать значения:

  • none - разрешить обтекание;
  • left - запрет обтекания с левой стороны;
  • right - запрет обтекания с правой стороны;
  • both - запрет обтекания с обоих сторон.

Чаще всего для расширения границы до конца плавающего блока используется тег <br style="clear:both">, также можно использовать <div style="clear:both"></div> без внутреннего содержания.

Выравнивание изображения по левому краю в css

Выровнять изображение по левому краю в css, можно так же как и по правому, только вместо float: right, пишется float: left, а вместо отступа от левого края устанавливается отступ от правого с помощью свойства margin.

Примеры

Пример html кода выравнивания картинки по правому краю в css(clear не нужен)

Результат в браузере
Код страницы(свойство clear не нужно)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/1.jpg" style="float:right; margin: 0px 0px 0px 15px" >
<p>... Здесь можно разместить текст ...</p>
</body>
</html>

В примере выше изображение прижимается к правому краю и имеет отступ слева в 15 px.

Пример html кода как выровнять картинку по правому краю в css(clear необходим для расширения границы)

Результат в браузере
Код страницы(со свойством clear)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<div style="border:4px solid #ccc; padding:10px">
<img src="my_img/1.jpg" style="float:right; margin: 0px 0px 0px 15px" >
<p>... Здесь можно разместить текст ...</p>
<br style="clear:both">
</div>
</body>
</html>

В примере выше свойство "border:4px solid #cccccc;" означает сделать рамку толщиной 4px и цветом #cccccc, а padding:10px это внутренний отступ тега div на 10px.

Пример html кода как выровнять картинку по левому краю в css(clear необходим для расширения границы)

Результат в браузере
Код страницы(со свойством clear)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>

<img src="my_img/1.jpg" style="float:left; margin: 15px 15px 0px 0px" >
<h2>Птицы</h2>
<p>... Здесь можно разместить текст ...</p>
<br style="clear:both">

<img src="my_img/2.jpg" style="float:left; margin: 15px 15px 0px 0px" >
<h2>Рыбы</h2>
<p>... Здесь можно разместить текст ...</p>
<br style="clear:both">

</body>
</html>

В примере выше изображение прижимается к левому краю и имеет отступ сверху и справа в 15 px.




© 2007-2017 Студия web дизайна «Webdeco» - Разработка сайтов | Продвижение сайтов | Статьи