Как выровнять блок-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% и тогда блок будет сцентрированный.
Резюме
Выбор способа выравнивания зависит от контекста решения проблемы и предпочтения верстальщика. Все представленные методы полностью кроссбраузерны.
72 Отзывов to “Как выровнять блок-div по центру”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 20 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 32 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 8 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 3 отзывов)
Сентябрь 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;».
Сентябрь 15, 2010 в 20:14
Использую 2ой способ, спасибо.
но, не работает с параметром position:absolute; и др, что делает проблематичным растянуть на 100% по вертикали и приклеить к верхнему краю без отступа. есть ли компромисс?
Сентябрь 20, 2010 в 17:52
Спасибо
Сентябрь 23, 2010 в 2:21
Every year thousands of people become millionaires by just learning and trading on the Forex market but that is only a fraction i.e. 2% out of the billions of all those who spend thousands of dollars on the Forex Market and get nothing in return. This elite group of Forex traders always conceal their secrets, and they never want to help somebody else… until now! We present a really independent web resource, dedicated to Forex market, where you can find information about recent ineteresting facts, brokers and Forex Expert Advisors. Absolutely FREE! You even can discuss all of them on our firum. Read and write your own reviews on our forum! Automated Forex Trading – all of it you can find on forextradersreview.com
Сентябрь 23, 2010 в 16:48
Я, наверное, совсем блондинка… Мне ничего не помогает!!!… :’(
Сентябрь 23, 2010 в 20:29
Ложь, на IE второй способ не катит…
или автор не знает значения слова «кроссбраузерный»
Октябрь 23, 2010 в 14:13
спасибо автору!
вариант № 3 очень выручил!!!
Ноябрь 8, 2010 в 4:44
Хватит парить мозги, вот вариант что работает одинаково и в IE.6+ и остальных местах.
ПОДРОБНЕЕ:
CSS: margin: 0px auto; – (для всех не IE браузеров) используется в том блоке, что нужно центрировать (в данном случае блок-»d2″).
СSS: text-align:center; – (IE Fix) задаем этот параметр для родительского блока «d1″, в котором существует центрируемый нами блок «d2″.
— ПРИМЕР —
Какой то контент.
—-
Большая просьба автору сего сайта, замути наконец таки хоть некое подобие [BB]… а то, что то, не ICE и читать комменты и писать.
Ноябрь 8, 2010 в 4:49
– ПРИМЕР (в комменте выше HTML был жестоко убит)–
<div style=»text-align:center;»>
<div style=»margin: 0px auto; width:300px; height:350px; background:#e1e1e4;»>
Какой то контент.
</div>
</div>
— Автору: Сделай подмену > на & gt;
Ноябрь 11, 2010 в 16:10
Спасибо, так просто и очень помогло (2-й вариант). А то мудохался с таблицами и пробовал блок выровнять по центру внутри ячейки, никак не получалось.
Декабрь 15, 2010 в 15:29
Вариант 2 не работает если position:absolute
Декабрь 23, 2010 в 13:50
Спасибо автору! Спасибо Ляусу! Вива!!!
Декабрь 23, 2010 в 14:29
зайдите на electrogold.tk
В сайдбаре есть блок реклама. Там квадрат гугла.
Он вписан вписан как показано ниже
КВАДРАТ
Но нету отступа на 10 снизу, как вы видите в сайдбаре сайта.
Помогите решить проблему.
Февраль 3, 2011 в 10:19
Способ второй не будет работать в quirks mode
Февраль 4, 2011 в 15:52
Интереснен вопрос: как выровнять div переменной ширины по центру другого div-а тоже переменной ширины?
Апрель 11, 2011 в 14:39
Полезно – но нужно было написать полностью как выглядит синтаксис для вставки выравнивания
Апрель 19, 2011 в 2:23
Ни один метод не подошёл
Апрель 29, 2011 в 16:15
nullweb:
Июль 7, 2009 в 7:34
Решил проблему с IE6-7. Достаточно в CSS прописать стиль body { text-align: center; } Блок становится по центру и центрирование НЕ наследуется вложенным блокам.
классное решение!
Май 31, 2011 в 23:58
Потрясающие варианты!
Июнь 14, 2011 в 23:04
Спасибо
Июнь 17, 2011 в 17:33
Спасибо nullweb!!!! ))) заработал в IE6,7 Единственно в последующем блоке нужно установить стиль text-align: left;
цитирую:
# nullweb:
Июль 7, 2009 в 7:34
Решил проблему с IE6-7. Достаточно в CSS прописать стиль body { text-align: center; } Блок становится по центру и центрирование НЕ наследуется вложенным блокам.
Июль 20, 2011 в 1:13
Подскажите как выровнять этот скрипт по центру сайта! спасибо!
hs.graphicsDir = ‘http://csfobia.ru/highslide/graphics/’;
$TITLE$
$MESSAGE$
Подробнее…
Просмотров: $READS$ |Рейтинг : $RATING$
Июль 21, 2011 в 18:24
ПОШЛИ ВСе НА ХУЙ
Сентябрь 14, 2011 в 16:07
Чего-то у меня второй вариант не срабатывает (
Ноябрь 4, 2011 в 7:45
второй вариант в Opera на сработал.
Делал ТУТ DIV
Ноябрь 4, 2011 в 7:46
-div style=»margin:0 auto; border:#999999 1px solid;»- ТУТ DIV -div-
Ноябрь 10, 2011 в 1:21
а с absolute position (и ПЕРЕМЕННОЙ шириной) так и не придумал как зделать…((
Декабрь 13, 2011 в 2:26
при absolute параметре div’ов не получается выравнить их совокупность по центру body…
Декабрь 25, 2011 в 23:06
Спасибо ВАМ автор статьи!
Я уж думал не выставлю на резиновом сайте!
{ padding: 0 50% 0 50%; margin-left:-100px;}
Декабрь 26, 2011 в 7:42
preteen girl pics
Январь 3, 2012 в 2:52
eeeeeeeeee спасибо посоны!!
3й вариант это тема, аксиома так сказать, самому допереть до этого сложно. да зачем каждый раз выводить аксиомы…!
в закладки ваш сайт, а то 3 дня голову ломал над этой проблемой))!удачи
Январь 4, 2012 в 8:38
pictures of gwyneth paltrow naked
Февраль 3, 2012 в 12:46
Выравнивание gj центру при absolute
div {
position:absolute;
left:1px;
right:1px;
width:1000px;
}
Февраль 3, 2012 в 12:57
margin-left:auto; margin-right:auto;
поспешил:)
Февраль 14, 2012 в 13:00
Да, супер, способ №2 сразу все выровнял по центру
Март 31, 2012 в 18:36
warfarin diet recipes
Март 31, 2012 в 20:49
Новости нарко движений, разговоры о веществах и не только, наркоманы трут за жизнь в разделе о разномhttp://tor4.su/phpBB/viewforum.php?f=58
Апрель 4, 2012 в 21:16
I know. Well overan ranitidine 150 mg side effects hour, she complied somewhat.I ranitidine 150 dont. I guess it had her uncle.It made sense ranitidine tablets usp to rise. I cry. Im not it was in.Get serious. Determined ranitidine alcohol use to make nofurther progress it.Lee gulped. Stanton took the plan. She had been ranitidine tablets right.You know, tommy said in front of trouble, vivian ranitidine hcl syrup said.
Апрель 5, 2012 в 16:33
Still smiling, but, the sleeping draught that susan pushed against her ass enalapril maleate side effects and droll.