Как центровать блок в css

Как отцентровать div по горизонтали

Часто возникает ситуация, когда нужно отцентровать блок div внутри другого блока.

Для того чтобы отцентровать div в другом блоке или в body, надо описать для него стиль:

и после пишем в html-коде

При этом надо понимать, что нужно задать определённую ширину div, так как по умолчанию блок занимает всю доступную ширину. В данном случае ширина выбрана 500px. Может быть и другая, и в процентах.

Для того чтобы это центрирование работало в Interner Explorer, для документа надо задать DOCTYPE, примеру:

На работоспособность проверялось в IE 6, FF 3.5, Opera 9.64.

Комментарии с сайта

Спасибо за совет. Изменил DOCTYPE 4,01 на 1,0 , и сайт отцентровался по середине в IE6. До этого прилипал к левой стороне!

рад что статья оказалось полезной 🙂

не центруеться в ie6,
для центрирования определенных дивов использую тег в html

Если вы сильны в css как еще обойти данную проблему.
Потому как даже в html коде например пишу
даже в такой ситуации не центрует эксплорером 6.

Если будет время отпишите мне пожалуйста на почту — html-css@i.ua если не трудно.
Просто столкнулся с одной мистической штукой в блочной верстке, никак немогу понять в чем проблема. жду…

всё описанное в статье работает и неоднократно применялось на практике, сегодня снова всё проверил — работает, пример выложил здесь http://lamp-dev.ru/examples/center-div.html, проверял во всех имеющихся браузерах, в том числе в ie 6.
возможны следующие причины:
1. у вас блок фиксированной величины, но не указан DOCTYPE — тогда да, в IE не будет работать, надо указать DOCTYPE
2. у вас блок не фиксированной ширины, занимает всю доступную область, в этом случае он в принципе не может быть отцентрован. Хотя есть вариант: блок будет расширятся в зависимости от контента, при этом будет центрироваться — реализация описана здесь. То же железный способ, неоднократно использовался мною.
3. Есть ещё один вариант — Вы всё сделали как в статье, но для блока у вас где то в стилях прописано свойство float: left; или float: right;
тогда блок в независимости ни от чего будет выравниваться по левому или по правому краю. Но этот случай думаю не Ваш, так как у Вас не работает только в IE 6.

Больше ничего в голову не приходит, из за чего бы это не могло работать.

Только что зашел из оперы по ссылке (где вы проверили и сделали пример), у меня блок не центруется

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *