Каков наилучший способ центрировать контент веб-страницы с помощью CSS? - PullRequest
10 голосов
/ 07 января 2010

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

#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
}
<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

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

Ответы [ 8 ]

16 голосов
/ 07 января 2010

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

Чтобы реализовать строгий тип документа XHTML, поместите его над своим узлом в качестве первой строки на странице:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 голосов
/ 07 января 2010

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

2 голосов
/ 07 января 2010

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

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

1 голос
/ 08 января 2010

Я думаю, что это лучшее решение.

Это центрирует содержимое всей страницы , если оно содержится в пределах 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" центрирует верхние деления.

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

1 голос
/ 07 января 2010

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

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

0 голосов
/ 07 января 2010

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

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

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

0 голосов
/ 07 января 2010

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

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

0 голосов
/ 07 января 2010

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

- Правка

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...