Что лучший способ состоит в том, чтобы центрировать содержание веб-страницы использование CSS?
Я видел несколько методов для создания простого фиксированного расположения отдельного столбца ширины с помощью CSS. Мне нравится один показанный здесь, потому что существует очень мало включенного кода, и он работает над каждым браузером, который я попробовал.
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
...entire layout goes here...
Автор упомянул, что получил некоторую критику. Я не веб-разработчик, таким образом, я хотел спросить сообщество, что они думали об этом подходе. Более конкретно есть ли лучше/больше совместимый способ выполнить это?
8 ответов
"margin: 0 auto" - это лучший способ сделать это, вам просто нужно быть уверенным, что у вас есть подходящий док-тип, чтобы он работал. Я всегда использую XHTML строго - другие тоже будут работать. Если у вас нет хорошего doctype, содержимое не будет центрироваться в IE6
Для реализации строгого doctype XHTML, поместите это над вашим узлом, как первую строку на странице:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
margin: 0 auto; ( или margin-left: auto; margin-right: auto; ) на самом деле самый простой способ, и нет никаких проблем с его использованием для центрирования содержимого.
Я считаю, что тег ширины должен быть max-width: xxxpx. Для мобильных браузеров с крошечной шириной 360px или меньше, они просто получат максимально возможный размер для вашего контейнера, который впишется в их размер экрана (но тогда ваша внутренняя раскладка тоже должна будет грациозно масштабироваться). Также обратите внимание, что max-width не работает на IE6.
Вы изложили подход, который я использую. Я использую его в течение нескольких лет, и он не подвел меня. Я не могу придумать, что бы это за критика.
margin: 0 auto; - лучший метод центрирования.
Автор статьи, на которую вы ссылаетесь, заявил, что text-align: center; было необходимо для поддержки IE5/Win. Думаю, это можно смело проигнорировать, так как IE5 хорошо и действительно мертв.
Я думаю, что это лучшая работа.
Это будет центрировать все содержимое страницы , когда оно содержится в div id="pagebox" шириной 600px.
body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }
Comments
Specify a min-width for the body as wide as the pagebox body as wide as the pagebox element.
.
Это предотвращает появление отрицательных (т.е. недоступных) левых полей в узких окнах браузера при использовании Navigator 6+/ Mozilla on Windows.
MSIE 5 не центрируется на основе auto левых/правых полей, но "text-align:center" делает это по центру.
Надеюсь, это поможет
.Я нахожу обычной практикой использовать margin: 0 auto; для центрирования вашего элемента.
Также теги стилизации типа <центр> устарели в текущей версии (HTML 4.01).
Лучший способ сделать это - это создать дайв, скажем, 960px шириной и дать ему {margin: 0 auto;}.
Что я также люблю делать, так это дать этому дайву немного {padding]: 0 15px;} Таким образом, центральная область на самом деле 990px, которая все еще идеально выровнена по центру в 1024x768 мониторах, в то время как подкладка обеспечивает подушку по краям для пользователей, использующих более маленькие мониторы или Google Chrome.
И идя дальше, я на самом деле создаю оберточное div, которое просто занимает всю страницу, а затем центрирую содержимое div внутри нее. Это позволяет мне использовать такие вещи, как нижний колонтитул, который всегда прилипает к нижней части экрана независимо от длины содержимого (например, http://ryanfait.com/sticky-footer/).
. Честно говоря, я просто использую тег . Я полагаю, он устарел (и у вас есть некоторые жалобы на него, вероятно, в зависимости от вашего типа документа), но он работает.
- Править
Да, голоса против этого вполне предсказуемы, но я действительно надеюсь, что кто-нибудь сможет точно объяснить, почему (помимо педантичности) это не работает; потому что, насколько я понимаю, он работает во всех браузерах. Могу ошибаться :)