[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; margin-left:-380px; }

Дивіться, без лайфхаків! Хоч це й не найкраще рішення, це хороший спосіб і дуже універсальний — дивно, що воно навіть не працює в NetscapeNavigator 4.x без жодних проблем, чи не так? Тож якщо ви хочете найширший спектр підтримки браузерів, цей метод буде найкращим вибором.