Выравниваем DIV по центру страницы

ЦентрВыравнивание блочного элемента DIV по центру, а div именно блочный элемент.

Один из фундаментальных вопросов для тех, кто создает сайты, используя блочную верстку.

Рассмотрим несколько подходов для решения этой вроде и простой, но на самом деле не очень тривиальной задачи.

Почти все знают параметр css: text-align:center. Он производит выравнивание по центру.

Поэтому делают следующим образом:

1
2
<div id="test"></div>
<div id="kv"></div>

И добавляют стили:

1
2
3
4
5
6
7
8
9
#test
{
    text-align:center;
}
#kv{
    width:100px;
    height:100px;
    background:#F00;
}

Но этот фокус работает только в Internet Explorer 6, за 7 не скажу, в 8 точно не работает.

Другие браузеры на него не отреагируют выравниванием дочернего div. В силу того, что text-align работает только для строковых элементов.

Существует несколько способов для выравнивания div по центру:

Text-align для родительского элемента

Был описан выше, но работает только для IE 6.

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

Продеться писать во втором блоке text-align:left, что бы вернуть все на место.

Align для родительского элемента

Те же два div

1
2
<div id="test">
<div id="kv"></div>

Но прямо в html коде ставим выравнивание родительскому div.

1
2
<div id="test" align=center>
<div id="kv"></div>

Стили:

1
2
3
4
5
6
7
8
9
#test
{
   
}
#kv{
    width:100px;
    height:100px;
    background:#F00;
}

Недостаток тот же, что и в первом случае. Но зато работает во всех браузерах!

Margin для элемента с фиксированой шириной

В третьем способе достаточно будет одного div

1
<div id=”kv”></div>

Стили:

1
2
3
4
5
6
7
#kv
{
width:100px;
height:100px;
background:#F00;
margin:0 auto;
}

Поддерживается всеми браузерами.

!Важно: у div должна быть фиксирования ширина.

Margin для элемента ширина которого задана в процентах

Наш старый добрый div

1
<div id=”kv”></div>

Только в стилях ширину поменяем на проценты

1
2
3
4
5
6
#kv
{
width:50%;
height:100px;
background:#F00;
}

Теперь применим выравнивание div по центру:

1
2
3
4
5
6
7
#kv
{
width:50%;
height:100px;
background:#F00;
margin: 0 25% 0 25%;
}

То есть мы указали, что отступ слева и справа будет 25%, а сверху и снизу 0.

Центрируем с помощью позиционирования

Подробнее узнать виды позиционирования.

1
<div id=”kv”></div>

Стили:

Выравнивае div по центру с помощью relative:
#kv

1
2
3
4
5
6
7
8
{
width: 100px;
height:100px;
background:#F00;
position:relative;
left:50%;
margin-left:-100px;
}

Выравнивае div по центру с помощью absolute:

1
2
3
4
5
6
7
8
#kv{
    width:100px;
    height:100px;
    background:#F00;
    position:absolute;
    left:50%;
    margin-left:-100px;
}

Код тот же. Но разный подход к позиционированию!

Как видите выравнивание div не совсем однозначная задача, но мы заставили его перейти в положение центр.

На этом все. Удачи!!!

С уважением Тригуба Сергей!

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

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

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

Комментариев43 комментария

Придется Вас поправить:

1. В первых двух примерах не хватает закрывающего DIV'а

2. Во втором примере (Align для родительского элемента) вообще не пойму Вас. Атрибут align является устаревшим и ранее применялся для таблиц, в блочной вёрстке он не применяется и не работает ни в одном браузере, за исключением IE и Opera.

2

спасибо за совет. использовал этот приём: margin: 0 auto; где width=фиксированная ширина

евгений
3

отлично пишешь чувак!

евгений
4

а как выровнить по правому краю с помощью «Margin для элемента с фиксированой шириной»? и пояснение бы к margin:0 auto;

евгений
5

разобрался.

и кстати в разделе «Центрируем с помощью позиционирования» в строчке margin-left:-100px; нужно писать не -100px, а — (половина ширины) px

6

Большое спасибо. Важная тема. Разобрался.

Такая проблема:

Сайт на div'ах с фикс. шириной, везде выравнивание через маргин 0 авто.

Внезапно, в IE перестало работать центрирование.

В чем может быть проблема?

Спасибо.

    Здравствуйте. Как известно, внезапно ничего не бывает. По этому слишком мало симптомов, что бы выписывать лекарство!

    Да, в IE почему-то не работает =( хотя способ абсолютно валидный. Почему с IE всегда одни проблемы?! Все люди как люди)))

      Нашел в чем проблема.

      Перед доктайп стоит строка с комментарием:

      Если доктайп поставить первой строкой, а потом комментарий:

      то выравнивание работает.

А что если вставить один div в другой. В родительском div-e прописать align="center"? Будет выравнивание?

Елена
9

Вот спасибо! Так СПАСИБО! БЛАГОДАРЮ! Так во время!

И так все понятно написано!;)

Я все способы попробовала) Получилось;)))

А-е-е-е!;)

Успехов вам!

Сергей
10

Пригодилось спасибо!

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет