Центрирование элемента с помощью CSS — непростая задача: одни и те же допустимые настройки центрирования CSS ведут себя по-разному в разных браузерах. Давайте сначала рассмотрим несколько распространенных методов CSS для центрирования элементов по горизонтали.
1. Используйте автоматические поля для достижения центрирования. Предпочтительный способ центрировать элемент по горизонтали в CSS — использовать атрибут поля — просто установите для атрибутов поля слева и справа поля значение auto. На практике мы можем создать элемент div, который будет выступать в качестве контейнера для элементов, которые необходимо центрировать. Особенно следует отметить, что для контейнера должна быть указана ширина:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px
}
Этот метод очень хорошо работает в большинстве основных браузеров, даже в IE6 на платформе Windows, его также можно использовать в режиме совместимости со стандартами (режим соответствия). отображается нормально. Но, к сожалению, в более ранних версиях IE этот параметр не обеспечивает эффекта центрирования. Поэтому, если вы хотите использовать этот метод в реальных проектах, вы должны убедиться, что версия браузера IE пользователя не ниже 6.0.
Хотя поддержка далека от идеальной, большинство дизайнеров рекомендуют использовать этот подход всякий раз, когда это возможно. Этот метод также считается наиболее правильным и разумным среди различных способов добиться горизонтального центрирования элементов с помощью CSS.
2. Используйте text-align для центрирования. Другой способ добиться центрирования элементов — использовать атрибут text-align. Установите значение атрибута center и примените его к элементу body. Этот подход является полным хаком, но он совместим с большинством браузеров, поэтому в некоторых случаях он, естественно, необходим.
Причина, по которой это называется хаком, заключается в том, что этот метод применяет атрибут text не к тексту, а к элементу, который является контейнером. Это также создает для нас дополнительную работу. После создания необходимых div для макета нам нужно применить к телу атрибут text-align по следующему коду:
body{
text-align:center
}
Будут ли после этого проблемы? Все дочерние элементы body будут отображаться по центру.
Следовательно, нам нужно написать еще одно правило, чтобы вернуть тексту выравнивание по левому краю по умолчанию:
p {
выравнивание текста: по левому краю;
}
Вы можете себе представить, что это дополнительное правило доставит некоторые неудобства. Кроме того, браузеры, действительно полностью соответствующие стандартам, не будут менять положение контейнера, а лишь центрируют текст внутри него.
3. Используйте комбинацию автоматических полей и выравнивания текста. Поскольку метод выравнивания и центрирования текста имеет хорошую обратную совместимость, а метод автоматического поля также поддерживается большинством современных браузеров, многие дизайнеры используют комбинацию этих двух методов для создания эффектов центрирования. получить максимальную кроссбраузерность:
body {
выравнивание текста: по центру;
}
#контейнер {
поле слева: авто;
поле справа: авто;
граница: 1 пиксель, сплошная красная;
ширина: 168 пикселей;
выравнивание текста: по левому краю
}
Но это все еще хак, и он ни в коем случае не идеален. Нам все еще нужно написать дополнительные правила для центрирования текста в контейнере, но, по крайней мере, это хорошо выглядит в разных браузерах.
4. Решение с отрицательными полями Решение с отрицательными полями — это гораздо больше, чем просто добавление отрицательных полей к элементам. Этот метод требует использования как абсолютного позиционирования, так и отрицательных полей.
Ниже приводится конкретный метод реализации этого решения. Сначала создайте контейнер, содержащий центрированный элемент, а затем расположите его на расстоянии 50 % от левого края страницы. Таким образом, левое поле контейнера будет начинаться с 50% ширины страницы.
Затем установите значение левого поля контейнера равным отрицательной половине ширины контейнера. Это закрепит контейнер в горизонтальной середине страницы.
#контейнер {
фон: #ffc url(mid.jpg) повтор-y center;
позиция: абсолютная;
осталось: 50%;
ширина: 760 пикселей;
поле слева: -380 пикселей;
}
Видите, никакого взлома нет! Хотя это и не самое предпочтительное решение, это хороший подход, и он работает очень хорошо - он работает даже в Netscape Navigator 4.x без каких-либо проблем, что удивительно, не так ли? Поэтому, если вам нужна самая широкая поддержка браузера, этот метод станет лучшим выбором.