Каков наилучший способ центрирования содержимого веб-страницы с помощью css?

Я видел несколько методов для создания простого однострочного макета фиксированной ширины с использованием CSS. Мне нравится тот, который показан здесь, потому что код очень мало, и он работает в каждом браузере, который я пробовал.

#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
}

<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

Автор упомянул, что получил критику. Я не веб-разработчик, поэтому я хотел спросить сообщество, что они думают об этом подходе. Более конкретно, есть ли лучший/более совместимый способ для этого?

Ответ 1

"margin: 0 auto" - лучший способ сделать это, вы просто должны быть уверены, что у него будет правильный doctype, чтобы он работал. Я всегда использую XHTML strict - другие тоже будут работать. Если у вас нет хорошего doctype, контент не будет центрироваться в IE6

Чтобы реализовать строгий doctype XHTML, поместите это выше вашего node, как первую строку на странице:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ответ 2

margin: 0 auto; (или margin-left: auto; margin-right: auto;) на самом деле является самым простым способом. И действительно нет проблем с тем, чтобы придерживаться его для центрирования контента.

Я считаю, что тег ширины должен быть max-width: xxxpx. Для мобильных браузеров с крошечной 360px или меньшей шириной они просто получат максимально возможный размер для вашего контейнера, который соответствует размеру экрана (но тогда ваш внутренний макет также должен масштабироваться тоже.) Также обратите внимание, что max-width не работает на IE6.

Ответ 3

Подход, который вы наметили, является тем, который я использую. Я использую его несколько лет, и это меня не подвело. Я не могу придумать, что такое критика.

Ответ 4

margin: 0 auto; - лучший метод для центрирования.

Автор статьи, на которой вы ссылаетесь, заявил, что для поддержки IE5/Win требуется text-align: center;. Я думаю, вы можете смело игнорировать это, поскольку IE5 хорошо и по-настоящему мертв.

Ответ 5

Я думаю, что это лучшая работа.

Это будет центрировать содержимое всей страницы, если оно содержится в div id="pagebox" шириной 600 пикселей.

body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }

Задайте min-width для body шириной, чем сам элемент pagebox.
Это предотвращает отрицательные (то есть недоступные) левые поля в узких окнах браузера при использовании Navigator 6 +/Mozilla в Windows.

MSIE 5 не сосредотачивается на основе auto полей слева и справа, но "text-align:center" делает центральные верхние div.

Надеюсь, что это поможет

Ответ 6

Я считаю обычной практикой использовать margin: 0 auto; для центрирования вашего элемента.

Также теги стиля, такие как <center> устарели в текущей версии (HTML 4.01).

Ответ 7

Лучший способ сделать это - создать div, скажем, шириной 960 пикселей и присвоить ему {margin: 0 auto;}.

То, что я также хотел бы сделать, это дать div div {padding: 0 15px;}. Таким образом, центрированная область на самом деле равна 990px, которая по-прежнему полностью выравнивается по центру в мониторах 1024x768, тогда как прокладка обеспечивает подушку по краям для пользователей, использующих более мелкие мониторы или Google Chrome.

Идя дальше, я на самом деле создаю оболочку div, которая просто занимает всю страницу, а затем центрирует содержимое div внутри. Это позволяет мне использовать такие вещи, как нижний колонтитул, который всегда придерживается нижней части экрана независимо от длины содержимого (например, http://ryanfait.com/sticky-footer/).

Ответ 8

Честно говоря, я просто использую тег <center>. Он устарел, я полагаю (и вы получите некоторые жалобы на это, возможно, в зависимости от вашего doctype), но он работает.

- Изменить

Ну, авитаторы на этом достаточно предсказуемы, но я надеюсь, что кто-то может точно определить, почему (за пределами педантичности) это не работает; потому что это мое понимание, это работает во всех браузерах. Я мог ошибаться:)