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

text-align:center;

Это приводит к выравниванию по центру только в моем “любимом” IE. В других же браузерах это свойство работает только для строчных элементов, которым div не является. Начнем.

Горизонтальное выравнивание с помощью CSS.

.polezniy{
 margin:0 auto;
 width:200px;/*Ширина блока*/
 height:200px;/*Высота блока*/
}

Чтобы выровнять контейнер по центру по горизонтали, нужно задать его ширину, а так же, установить margin слева и справа в auto. Этот метод работает для блочных элементов (контейнеры, параграфы, и тд). Чтобы он работал и для строчных элементов, таких как ссылки и изображения, нужно применить свойство display:block.

Тогда код будет выглядеть так:

.polezniy{
 margin:0 auto;
 width:200px;/*Ширина блока*/
 height:200px;/*Высота блока*/
 display:block
}

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

.polezniy{
 width:300px; /*Ширина блока*/
 height:200px; /*Высота блока*/
 position:relative;
 left:50%;
 top:50%;
 margin:-100px 0 0 -150px; /*Смещаем вверх - на половину высоты и влево – на половину ширины*/
}

Тут все немного сложнее. Для начала, нужно знать как ширину, так и высоту выравниваемого элемента. Установив свойства left и top равными 50% мы расположили верхний левый угол нашего элемента по центру родительского элемента (так как задано свойство position:relative). Теперь нужно сдвинуть наш элемент налево — на половину ширины и наверх — на половину высоты, чтобы сдвинуть его на нужную позицию. Если возникнет необходимость разместить элемент по центру экрана, то нужно заменить

position:relative;

на

position:absolute;

Добавлено: 15 Августа 2013 12:09:17 Добавил: Андрей Ковальчук Нравится 0

Добавить