Как отцентровать div по горизонтали
Часто возникает ситуация, когда нужно отцентровать блок div внутри другого блока.
Для того чтобы отцентровать div в другом блоке или в body, надо описать для него стиль:
.center {
width: 500px;
margin: 0 auto;
}
и после пишем в html-коде
<div class="center">
этот блок будет по центру
</div>
При этом надо понимать, что нужно задать определённую ширину div, так как по умолчанию блок занимает всю доступную ширину. В данном случае ширина выбрана 500px. Может быть и другая, и в процентах.
Для того чтобы это центрирование работало в Interner Explorer, для документа надо задать DOCTYPE, примеру:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">На работоспособность проверялось в IE 6, FF 3.5, Opera 9.64.
Рубрики: HTML/CSS
12.03.2010 12:58
Спасибо за совет. Изменил 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.
Больше ничего в голову не приходит, из за чего бы это не могло работать.
Только что зашел из оперы по ссылке (где вы проверили и сделали пример), у меня блок не центруется
а какая у вас версия оперы?
проверил в Opera 9.64, Opera 8.5, Opera 11.00 – всё работало, вот только 10ой под под рукой не оказалось, надо будет установить, проверить
Рассылка от смартреспондера на моем сайте тоже липнет к левой стороне. Теги ее не центрируют, хотя на другие элементы сайта работают. Подскажите в чем проблема!
извините, давно не отвечал на комментарии.
Вы можете указать страницу и как то подробнее описать проблему?