Центрирование элемента с помощью CSS — непростая задача. Одна и та же настройка центрирования CSS ведет себя по-разному в разных браузерах. В этой статье представлены несколько распространенных методов CSS для центрирования элементов по горизонтали.
1. Используйте автоматические поля для достижения центрирования.
Предпочтительный способ центрировать элемент по горизонтали в CSS — использовать атрибут поля — просто установите для атрибутов поля слева и справа поля значение auto. На практике мы можем создать элемент div, который будет выступать в качестве контейнера для элементов, которые необходимо центрировать. Особенно следует отметить, что для контейнера должна быть указана ширина:
Этот метод очень хорошо работает в большинстве основных браузеров, и даже IE6 на платформе Windows может нормально отображаться в стандартном режиме соответствия. Но, к сожалению, в более ранних версиях IE этот параметр не обеспечивает эффекта центрирования. Поэтому, если вы хотите использовать этот метод в реальных проектах, вы должны убедиться, что версия браузера IE пользователя не ниже 6.0.
Хотя поддержка далека от идеальной, большинство дизайнеров рекомендуют использовать этот подход всякий раз, когда это возможно. Этот метод также считается наиболее правильным и разумным среди различных способов добиться горизонтального центрирования элементов с помощью CSS.
2. Используйте text-align для центрирования.
Другой способ добиться центрирования элементов — использовать атрибут text-align. Установите значение атрибута center и примените его к элементу body. Этот подход является полным хаком, но он совместим с большинством браузеров, поэтому в некоторых случаях он, естественно, необходим.
Причина, по которой это называется хаком, заключается в том, что этот метод применяет атрибут text не к тексту, а к элементу, который является контейнером. Это также создает для нас дополнительную работу. После создания необходимых div для макета нам нужно применить атрибут text-align к телу согласно следующему коду:
Будут ли какие-либо проблемы в дальнейшем? Все дочерние элементы тела будут отображаться по центру.
Поэтому нам нужно написать еще одно правило, чтобы вернуть тексту выравнивание по левому краю по умолчанию:
Вы можете себе представить, что это дополнительное правило доставит некоторые неудобства. Кроме того, браузеры, действительно полностью соответствующие стандартам, не будут менять положение контейнера, а лишь центрируют текст внутри него.
3. Используйте комбинацию автоматических полей и выравнивания текста.
Поскольку метод выравнивания и центрирования текста имеет хорошую обратную совместимость, а метод автоматического поля также поддерживается большинством современных браузеров, многие дизайнеры используют комбинацию этих двух методов для создания эффектов центрирования. получите максимальную кроссбраузерную поддержку:
Но это все еще хак, и он ни в коем случае не идеален. Нам все еще нужно написать дополнительные правила для центрирования текста в контейнере, но, по крайней мере, это хорошо выглядит в разных браузерах.
4. Решение с отрицательными полями
Решение с отрицательными полями — это гораздо больше, чем просто добавление отрицательных полей к элементам. Этот метод требует использования как абсолютного позиционирования, так и отрицательных полей.
Ниже приводится конкретный метод реализации этого решения. Сначала создайте контейнер, содержащий центрированный элемент, а затем расположите его на расстоянии 50 % от левого края страницы. Таким образом, левое поле контейнера будет начинаться с 50% ширины страницы.
Затем установите значение левого поля контейнера равным отрицательной половине ширины контейнера. Это закрепит контейнер в горизонтальной середине страницы.
Хотя это и не самое предпочтительное решение, это хороший подход, имеющий широкий спектр применимости.