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

. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

Как поймать льва?

Метод перебора

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

Метод дихотомии

Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.

Результат примера показан на рис. 1.

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

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами 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 - запрет обтекания с обоих сторон.

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

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

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

Примеры

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

Результат в браузере

Код страницы(свойство clear не нужно)

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

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

Результат в браузере

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

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

Результат в браузере

Код страницы(со свойством clear)

Птицы

Рыбы

Здесь можно разместить текст...

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

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

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

Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Не наследуется, применяется ко всем элементам. вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .

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

Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо.

Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right..html">При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto.

Свойство display не наследуется, применяется ко всем элементам..html">тегу table, а table-cell — td.

Как выровнять текст по правому краю

Короткий текст справа