Умение выравнивать элементы в 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.