Центрирование блока средствами CSS

В процессе верстки веб-страниц достаточно часто встречается задача центрирования блоков. Это может быть как вертикальное, так и горизонтальное центрирование.

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

Для начала поговорим о горизонтальном центрировании. Наиболее популярный прием, это когда блок центрируется установкой размеров правого и левого margin в "auto" . Допустим, мы хотим отцентрировать блок с id ="container" шириной 860px. В таком случае в CSS файле нужно написать:

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
}

Однако I.E. старых версий( 5.0 например) не выровняет этот блок по центру. Конечно, такие древние браузеры уже никто не использует(из 1800 моих дневных посетителей - только 1), однако на всякий случай, лучше сделать, чтобы и там работало:)

Для этого, родительскому элементу, т.е тому, внутри которого мы центрируем наш блок(обычно родительским элементом является тег BODY), нужно задать параметр text-align:center. В таком случае блок выровняется по центру, однако и все его содержимое, также выровняется по центру, а нам этого не нужно. Поэтому, внутри этого блока ставим выравнивание по умолчанию - text-align:left .

body {text-align:center}

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
text-align:left;
}

Существует также другой способ горизонтального выравнивания блока, основанный на позиционировании. Как Вы наверное знаете, по умолчанию, любой блочный элемент прижимается к левому краю родительского элемента. Поэтому, чтобы выровнять его по центру нужно:

1. Задать блоку абсолютное позиционирование

2. Сместить его вправо на 50% ширины окна браузера

3. Используя отрицательный отступ, сместить его влево на расстояние, равное половине ширины блока.

Таким образом, блок окажется по центру. Для большей наглядности, посмотрите ролик ниже:

CSS код примера:

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Следует отметить, что если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, то для этого другого блока нужно задать position:relative;

Предположим, наш блок #container, который нужно выровнять по центру, лежит внутри блока #wrap. Тогда код будет выглядеть следующим образом:

#wrap{position:relative}

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Теперь давайте рассмотрим случай, когда нужно выровнять блок по центру страницы, т.е. применить одновременно горизонтальное и вертикальное центрирование. Здесь опять же применим позиционирование. Итак нам нужно:

1. Задать блоку абсолютное позиционирование

2. Сместить его вправо на 50% и вниз на 50% , тем самым поставив его верхний левый угол в центр окна браузера.

3. Используя отрицательный отступ, сместить его вверх на расстояние, равное половине высоты блока, и влево на расстояние, равное половине ширины блока.

Таким образом, блок окажется в центре веб-страницы.

Допустим высота нашего блока 600px , ну а ширина 860 px . Тогда CSS код будет выглядеть следующим образом:

#container {
background-color:#559964;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-430px;
height:600px;
width:860px;
}

Надеюсь сам принцип Вам понятен.

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2010-01-17      Просмотров: 37673      Автор:Андрей Галямов

Комментарии:

Автор: Евгений
Дата : 2010-01-18

Буду первым кто посмотрел урок!!!

Автор: Ani
Дата : 2010-01-18

Эх... Вторая =) Недавно встретилась с этой проблемой в IE, мучалась долго)) Спасибо =)

Автор: psyh0
Дата : 2010-01-18

Спасибо, страница в закладках)))

Автор: Геннадий
Дата : 2010-01-18

Большое спасибо , Андрей, за новые уроки!

Автор: Дима
Дата : 2010-01-18

Просто спасибо,я думаю добавить тут не чего))

Автор: Андрей
Дата : 2010-01-20

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

Автор: Сергей
Дата : 2010-02-27

А у меня проблема: сайт в Mozille Firefox не хочет выравниваться, прилип к левому краю и все, ничего из вышеперечисленного не помогает (то же и в Opera).

Автор: Ната
Дата : 2010-03-17

а почему это не работает? - "если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, о для этого другого блока нужно задать position:relative;"

Автор: Тимур
Дата : 2010-04-05

Огромное спасибо!!просто ГИГАНТСКОЕ спасибо!Дай Бог Вам здоровья!

Автор: Тимур
Дата : 2010-04-05

...всё отлично , но только почему то все изображения встают на места только после обновления браузера. Подскажите пожалуйста -почему так происходит?

Автор: Oleg
Дата : 2010-07-19

Андрей, добавьте пожалуйста поиск по сайту.

Автор: Алексей
Дата : 2010-10-05

Спасибо, правда нужно читать CSS )