Как отцентровать div по горизонтали
Часто возникает ситуация, когда нужно отцентровать блок div внутри другого блока.
Для того чтобы отцентровать div в другом блоке или в body, надо описать для него стиль:
1 2 3 4 5 |
.center { width: 500px; margin: 0 auto; } |
и после пишем в html-коде
1 2 3 4 |
<div class="center"> этот блок будет по центру </div> |
При этом надо понимать, что нужно задать определённую ширину div, так как по умолчанию блок занимает всю доступную ширину. В данном случае ширина выбрана 500px. Может быть и другая, и в процентах.
Для того чтобы это центрирование работало в Interner Explorer, для документа надо задать DOCTYPE, примеру:
1 2 |
<!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ой под под рукой не оказалось, надо будет установить, проверить
Рассылка от смартреспондера на моем сайте тоже липнет к левой стороне. Теги ее не центрируют, хотя на другие элементы сайта работают. Подскажите в чем проблема!
извините, давно не отвечал на комментарии.
Вы можете указать страницу и как то подробнее описать проблему?
Здравствуйте. Блок можно в принципе отцентрировать с помощью свойства left, задав нужное количество пикселей для отступа от левого края. Для этого нужно знать ширину блока, относительно которого центрируем вписанный блок, и ширину самого центрированного блока. После несложного расчета число этих пикселей будет нам известно.
Но вот например есть у меня в ряд несколько блоков (пункты горизонтального меню). Есть предположение, что возможно надо будет добавить еще 1-2. Для этого надо будет заново пересчитать число пикселей для отступа, что в общем-то несложно.
Но вот в этом примере: http://www.artlebedev.ru/tools/technogrette/html/align-center/ показано как можно автоматически отцентрировать блок. При этом способе не надо будет ничего пересчитывать.
Тогда возникает вопрос. Если вычисления несложны и код небольшой, может лучше все таки в данном случае использовать первый метод, учитывая то, что добавление одного блока не такая уж частая и вероятная ситуация?