Как выровнять блок-div по центру
09.12.2008 – Рубрика: HTML&CSS
Необходимость выровнять какой-то блочный элемент по центру является не редкой в повседневной работе верстальщика. Многие начинающие верстальщики спотыкаются об то, что css-свойство text-align:center; для родительского элемента приводит к выравниванию блока по центру только в Internet Explorer , в других браузерах это не приносит ожидаемого результата. Это связанно с тем, что во всех браузерах, кроме Internet Explorer, свойство text-align:center применяется только к строчным элементам. Подробней о том какие элементы относяться к строчным и в чем их особенность можно прочитать в заметке «Строчные – inline и блочные – block-level элементы«
В этой заметке будут представлены возможные варианты, выравнивая блока по центру внутри другого блочного элемента. В конце заметки есть ссылка на реализацию примеров приведенных здесь.
Вариант 1 (align=”center”)
Суть метода в том, что родительскому блоку (тому, в котором нужно выровнять блок по центру) присваивается атрибут align=”center”. Этот атрибут указывает на то, что все содержимое блока должно быть выровнено по центру. Результат метода удовлетворяет ожидания. Недостатком является то что все содержимое всех внутренних блоков также будет выровнено по центру, тоесть прийдеться внутренним элементам переопределять выравнивание. Другим недостатком является то, что атрибут align недопустим при строгой(Strict) разметке (подробней о типах разметки можно прочитать в заметке «Сага о doctype») что приведет к не прохождению валидации.
Вариант 2 (margin: 0 auto;)
Этот метод метода выравнивания div по центру является более эффективным, чем предыдущий. Метод основан на том, что блоку, который нужно выровнять по центру применяется css-свойство margin:0 auto;. Метод основан на сокращенно представлении свойства (подробней читай в заметке «Сокращения при написании CSS»). Таким образом, если необходимо будет еще добавить только отступ сверху необходимо изменить на margin:10px auto 0; или на margin:10px auto; если отступ нужен сверху и снизу.
Вариант 3 (позиционирование и отрицательный отступ)
Для того чтоб выровнять блок по центру можно еще воспользоваться этим способом выравнивания блока по центру. Он заключается в том, что блок позиционируется в родительском элементе и потом сдвигается влево на 50%, но таким образом элемент будет размещен не совсем по центру и для того чтоб это изменить блоку присваивается отрицательный левый отступ равный половине ширины блока чтоб четко выровнять его по центру. Главное в этом методе не забыть присвоить блоку позиционирование.
.example3 {
position:relative;
left:50%;
margin-left:-100px;
width:200px;
background:#FF6666;
border:1px solid #FF0000;
}
Вариант 4 (Процентное соотношение)
Если блок, который нужно разместить по центру, имеет ширину в процентах можно воспользоваться этим легким способом выравнивания блока по центру. Метод заключается в том, что блоку применяются боковые отступы равные половине ширины, оставшиеся от 100% после отнятии ширины блока. Скажем, если есть блок шириной 40%, то боковые отступы нужно сделать по 30% и тогда блок будет сцентрированный.
Резюме
Выбор способа выравнивания зависит от контекста решения проблемы и предпочтения верстальщика. Все представленные методы полностью кроссбраузерны.
34 Отзывов to “Как выровнять блок-div по центру”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 12 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)
Сентябрь 27, 2008 в 11:47
1. Параметр align кажется уже устаревший
2. Самый хороший вариант
3. Раньше использовал, но потом заметил что из-за отрицательного отступа при значительном уменьшении ширины родительского элемента этот отрицательный отступ прячет элемент слева (если родительский элемент body) или выводит элемент за пределы родителя
4. Как правило делаю ширину всётаки по пиксельно, ограничен достаточно.
Сентябрь 27, 2008 в 12:08
С моей точки зрения среди приведенных примеров нету панацеи от всех бед. Воторой лушче всего смотриться но не лишен недостатков. Как минимум это дублирование параметра маржин при необходимости сделать отступ сверху.
Октябрь 24, 2008 в 8:45
Однако, второй способ у меня почему-то не работает в IE6… Ведь не работает же или я что-то не так делаю?
Октябрь 24, 2008 в 9:19
Скорее ты что-то не так делаешь, все способы проверенны на кроссбраузерность. Убери все лишнее и оставь только нужный блок и сможешь сам убедиться в этом.
Октябрь 25, 2008 в 10:47
Если не ошибаюсь, для этого надо использовать стиль
margin-left:auto;
margin-right:auto;
Октябрь 25, 2008 в 10:57
margin:0 auto; это тоже самое, только в сокращенной форме
http://zodios.net/htmlcss/shortcss.html
Ноябрь 15, 2008 в 21:39
У меня сначала тоже ничего не работало (блок прилип к левому краю как прокаженный
. Даже хотел уже пожаловаться на это. Но потом заметил, что ширина блока к которому я применял margin равна… 100% (рудимент от попытки выравнивания с помощью text-align 
. Быстренько убрал эту несуразицу и все заработало. Так что большое спасибо.
З.Ы.
А можно узнать что это за волшебный параметр auto и почему он выравнивает именно по центру. Есть ли аналогичный способ прижать блок к правому краю?
Декабрь 14, 2008 в 23:42
Спасибо большое!! Второй вариант как раз то что и нужно… первый совсем устарел.
Февраль 9, 2009 в 14:32
Гы-гы! А теперь объясните как то-же самое сделать по вертикали, как в таблицах по умолчаню…
Март 30, 2009 в 10:37
У меня в IE6 тоже не работает
Апрель 17, 2009 в 16:50
да, всем спасибо.
работает второй способ
Апрель 23, 2009 в 15:07
второй способ не работает в ie7
Июль 7, 2009 в 7:34
Решил проблему с IE6-7. Достаточно в CSS прописать стиль body { text-align: center; } Блок становится по центру и центрирование НЕ наследуется вложенным блокам.
Июль 10, 2009 в 20:11
попробуйте побалловаться с display:inline-block;
при этом родительскому тегу задать text-align:center;
Июль 13, 2009 в 7:37
я так сделал:
body { text-align: center; }
#main { width: 1024px; text-align: left; margin: 0 auto; }
Август 6, 2009 в 12:28
Спасибо большое автору , наконец-то мне удалось найти корректное выравнивание.
Сентябрь 6, 2009 в 11:23
Класс, и ни одного способа, для резинового макета…
Сентябрь 12, 2009 в 22:51
#layer1 {height: 560px;
width: 740px;
margin-left:auto;
margin-right:auto;}
#layer2 {
height: 300px;
width: 590px
margin-left:auto;
margin-right:auto;}
layer2 не выравнивается по центру своего родителя, а прижимается влево. Как быть? Как выравнять второй DIV по центру первого, если первый тоже необходимо выравнивать по центру?
Сентябрь 12, 2009 в 22:56
#layer1 {height: 560px;
width: 740px;
margin-left:auto;
margin-right:auto;}
#layer2 {
height: 300px;
width: 590px
margin-left:auto;
margin-right:auto;}
<body><div id="layer1">
<div id="layer2"></div>
</div>
</body>
layer2 не выравнивается по центру своего родителя, а прижимается влево. Как быть? Как выравнять второй DIV по центру первого, если первый тоже необходимо выравнивать по центру?
Сентябрь 12, 2009 в 22:58
#layer1 {height: 560px;
width: 740px;
margin-left:auto;
margin-right:auto;}
#layer2 {
height: 300px;
width: 590px
margin-left:auto;
margin-right:auto;}
<body><div id="layer1">
<div id="layer2"></div>
</div>
</body>
layer2 не выравнивается по центру своего родителя, а прижимается влево. Как быть? Как выравнять второй DIV по центру первого, если первый тоже необходимо выравнивать по центру?
p.s.: прошу простить автора за невольный флуд и удалить сообщения с некорректным html-кодом. Спасибо.
Сентябрь 29, 2009 в 19:28
вввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввввв
Ноябрь 11, 2009 в 8:27
спасибо за заметку
Ноябрь 15, 2009 в 0:58
dsfsf
Декабрь 27, 2009 в 21:23
№15 nullweb
Спасибо именно то что нужно!
Январь 12, 2010 в 15:35
чс ЧС
Январь 18, 2010 в 10:31
Подскажите как мне в joomle один банер в блоке о центровать, а не по левому краю выставить?
Январь 22, 2010 в 20:24
Да, с IE, конечно, много проблем. В том числе и с центрированием. Но, как сказали выше, достаточно в css прописать к «body» – text-align:center и всё сразу становится отлично
Январь 25, 2010 в 8:15
Большое спасибо!!! Очень помогло…
Февраль 9, 2010 в 23:53
Забавно, что, когда я эксперементировал с третьим способом в Dreamweaver CS4, блок вёл себя просто волшебно! Он «менял правила» в зависимости от наличия или отсутствия марджина.
Попробуйте, очень увлекательно.
Апрель 1, 2010 в 10:34
Спасибо, второй способ реально помог.
Апрель 1, 2010 в 11:07
text-align: left;
margin: 0 auto;
вот для меня самый действенный
все остальное с косяками…не раз уже сталкивался с подобной задачей
если маргин делать с «-» то присжатии кояки идут
Апрель 9, 2010 в 15:11
Спасибо 2ой способ помог!
Май 9, 2010 в 20:37
Проще всего :
прописать в body
margin: 0 auto; /* Отступ слева и справа */
Август 28, 2010 в 18:24
чтобы выровнять блок по горизонтали прописываем блоку свойство «display: block;» (иначе в ie6 не будет пахать)Ю задаем ширину (можно в процентах) и присваиваем «margin: 0 auto;».