САМОУЧКА

Сайт для тех, кто хочет научиться

Наши публикации

< Предыдущая Следующая >

Умение выравнивать элементы в CSS необходимо для создания качественных веб-страниц.

Центрирование с помощью margin

Блоковые элементы могут быть выравнены по центру установкой margin с левой и правой стороны значения auto.

Обратите внимание: если ширина блокового элемента будет равна 100%, то он не будет выравнен (т.к. доступного margin нет).

Пример

.ali1

margin-left:auto;

margin-right:auto;

width:50%;

Выравнивание с помощью свойств позиционирования

Вы можете выравнивать элементы с помощью свойств позиционирования.

Пример

.pos

position:absolute;

width:400px;

left:0px;

background-color:green;

Свойство float

Элементы в CSS также могут быть выравнены с помощью свойства float.

Элемент выравненный с помощью float будет прижат к левой или правой границе родительского элемента (в зависимости от заданного значения) и заставит следующие за ним элементы "обтекать" его с противоположной стороны.

Свойство float часто используют с картинками (как в примере ниже), но оно также бывает полезно при обычном выравнивании.

Пример

.fl1

float:right;

Очищение элементов от float

HTML элементы следующие за элементом с заданным float будут его "обтекать", чтобы избежать этого используйте свойство clear.

Значения переданные данному свойству (left или right) указывают с какой стороны находится элемент с float. Если Вы не уверены или элементы с float находятся с двух сторон воспользуйтесь свойством both.

Пример

.fl2

clear:both;

Сделайте сами

Задание 1 выравняйте элементы как указано в описании.

Пример

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

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

3. Выравняйте меня по центру с помощью свойства margin.

  < Предыдущая  Следующая >

Последние добавления

HTML для новичков

XHTML

CSS для новичков