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

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

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

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

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

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

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

Рубрики: HTML/CSS
Теги: Div, html
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта
  1. Константин:

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

  2. Андрей:

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

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

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

    • admin:

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

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

  3. Вася:

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

    • admin:

      а какая у вас версия оперы?

    • admin:

      проверил в Opera 9.64, Opera 8.5, Opera 11.00 — всё работало, вот только 10ой под под рукой не оказалось, надо будет установить, проверить

  4. Рассылка от смартреспондера на моем сайте тоже липнет к левой стороне. Теги ее не центрируют, хотя на другие элементы сайта работают. Подскажите в чем проблема!

    • admin:

      извините, давно не отвечал на комментарии.
      Вы можете указать страницу и как то подробнее описать проблему?

  5. Максим:

    Здравствуйте. Блок можно в принципе отцентрировать с помощью свойства left, задав нужное количество пикселей для отступа от левого края. Для этого нужно знать ширину блока, относительно которого центрируем вписанный блок, и ширину самого центрированного блока. После несложного расчета число этих пикселей будет нам известно.

    Но вот например есть у меня в ряд несколько блоков (пункты горизонтального меню). Есть предположение, что возможно надо будет добавить еще 1-2. Для этого надо будет заново пересчитать число пикселей для отступа, что в общем-то несложно.

    Но вот в этом примере: http://www.artlebedev.ru/tools/technogrette/html/align-center/ показано как можно автоматически отцентрировать блок. При этом способе не надо будет ничего пересчитывать.

    Тогда возникает вопрос. Если вычисления несложны и код небольшой, может лучше все таки в данном случае использовать первый метод, учитывая то, что добавление одного блока не такая уж частая и вероятная ситуация?


Оставить комментарий

*