Необходимость выровнять блок div по центру возникает очень часто. Решил написать все мне известные способы, и начну с самого правильного:

Способ 1: (CSS margin: 0 auto;)
Выставляем стиль нашему блоку DIV style=”margin: 0 auto;”. Например:

в данном случае мы указываем что внешние отступы сверху и снизу по нулям, а сам блок выравнивается автоматом по центру. Если необходимо указать внешние отсупы по 25px то стили будут такими
margin: 25px auto; Если отступы сверху и снизу разные то
margin: 25px auto 11px;
Данный способ является универсальным и работает в IE 6+, Opera 9+ (может ниже), FF2+, GH1+

Способ 2 (CSS стиль align=”center”)
данный атрибут устарел, но все еще работает, но не во всех браузерах

Способ 3 (позиционирование и отрицательный отступ)
Делается так: блок позиционируется в родительском элементе и потом сдвигается влево на 50% (left:50%), но таким образом элемент будет размещен не совсем по центру и для того чтоб это изменить блоку задается отрицательный левый отступ равный половине ширины блока чтоб ровно выровнять его по центру.также присваиваем позиционирование. Пример:

.example3 {
position:relative;
left:50%;
margin-left:-250px;
width:500px;
background:green;
border:1px solid red;
}

Способ 4 (Процентное соотношение)

Если блок, который нужно разместить по центру, имеет ширину в процентах можно воспользоваться этим легким способом выравнивания блока по центру. Метод заключается в том, что блоку применяются боковые отступы равные половине ширины, оставшиеся от 100% после отнятии ширины блока. Скажем, если есть блок шириной 40%, то боковые отступы нужно сделать по 30% и тогда блок будет сцентрированный.

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

Tags: CSS и веб-дизайн, div, HTML, CSS и веб-дизайн, margin

2 коммент. на “Как разместить блок DIV по центру страницы (горизонтально)”

Оставить отзыв

Имя (*)

Mail (*)

Сайт