[CSS/DIV] Идеально решает горизонтальное центрирование страниц CSS

Распространённый метод CSS для горизонтального центрирования элементов

Центрирование элементов в CSS — это не тривиальная задача: одни и те же легитимные настройки центрирования CSS ведут себя по-разному в разных браузерах. Давайте начнём с нескольких распространённых способов горизонтального центрирования элементов в CSS.

1. Центрирование с автоматическими полями

Предпочтительный способ горизонтально центрировать элементы в CSS — использовать свойство margin — просто установить свойства margin-left и margin-right на auto. На практике мы можем создать контейнерный div для этих элементов, которые нужно центрировать. Стоит отметить, что ширина контейнера должна быть указана:

div#container{ margin-left:auto; margin-right:auto; ширина: 168px; }

Этот подход отлично работает в большинстве крупных браузеров, даже IE6 на Windows может отображаться корректно в стандартном режиме соответствия. К сожалению, в более низких версиях IE эта настройка не достигает эффекта центрирования. Поэтому, если вы хотите использовать этот метод в реальном проекте, убедитесь, что версия браузера IE пользователя не ниже 6.0.

Несмотря на отсутствие поддержки, большинство дизайнеров рекомендуют использовать этот подход как можно чаще. Этот метод также считается самым правильным и разумным из всех способов реализации центрирования на уровне элементов с помощью CSS.

2. Используйте выравнивание текста для достижения центрировки

Другой способ достичь центрировки элементов — использовать свойство выравнивания текста, установить значение свойства в центр и применить его к элементу тела. Это настоящий взлом, но он совместим с большинством браузеров, поэтому в некоторых случаях он естественно необходим.

Это называется хаком, потому что этот метод применяет свойства текста не к тексту, а к элементу, который является контейнером. Это также даёт нам дополнительную работу. После создания необходимых div для макета нужно применить свойство text-align к телу согласно следующему коду:

body{ text-align:center; }

Будут ли проблемы после этого? Все потомки тела расположены по центру.

Поэтому нам нужно написать другое правило, чтобы вернуть текст к стандартному левому выравниванию:

p{ text-align:left; }

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

3. Используйте комбинацию автоматических полей и выравнивания текста

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

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; граница: 1pxsolidred; ширина: 168px; text-align:left }

Но это всегда хак, и он далеко не идеален. Нам всё ещё нужно написать дополнительные правила для текста в центрированном контейнере, но, по крайней мере, это выглядит хорошо в разных браузерах.

4. Решение с отрицательной внешней границей

Решения с отрицательными границами далеко не просты, как добавление отрицательных запасов к элементам. Этот метод требует использования как абсолютного позиционирования, так и техники отрицательного поля.

Ниже приведён конкретный метод реализации этой схемы. Сначала создайте контейнер с центрированными элементами и разместите его точно на 50% от левого края страницы. Таким образом, левый край контейнера начнётся с 50% ширины страницы.

Затем установите левое значение контейнера на половину отрицательной ширины контейнера. Это закрепит контейнер в середине горизонтального направления страницы.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; позиция:абсолютная; лево:50%; ширина: 760px; слева-поля:-380px; }

Смотри, никаких хитростей! Хотя это не самое предпочтительное решение, это хороший способ, и он очень универсальн — удивительно, что он даже не работает в NetscapeNavigator 4.x без проблем, не так ли? Так что если вам нужен самый широкий спектр поддержки браузеров, этот метод будет лучшим выбором.