Використання CSS є найбільш оптимальним способом центрування зображень, блоків тексту і навіть всього дизайну веб-сторінки. Більшість властивостей для HTML align стали доступні в CSS. починаючи з версії 1.0. Вони відмінно працюють з CSS3 і сучасними веб-браузерами:
Застосування CSS для центрування в HTML
Центрування за допомогою CSS може стати проблемою для початківців веб-дизайнерів. Існує багато способів зробити це, але не всі вони можуть бути застосовані до кожного елементу.
CSS можна використовувати, щоб:- Центрировать текст;
- Центрировать блоковий елемент (наприклад, div);
- Центрировать зображення;
- Вертикально центрировать блок або зображення.
Багато років тому веб-дизайнери могли використовувати
Поради з центрування за допомогою CSS
HTML використовується для створення структури, а CSS визначає стилі. Так як центрування - це візуальна характеристика, то воно здійснюється за допомогою каскадних стилів.
Центрування тексту з CSS
Найпростіше центрировать текст на веб-сторінці. Щоб це зробити, потрібно всього одна властивість: HTML text align:
За допомогою цього рядка коду кожен параграф з класом center буде центрирован горизонтально всередині свого батьківського елемента.
Застосування цього класу:
При вирівнюванні тексту по центру за допомогою властивості text-align пам'ятайте, що він буде центрирован всередині містить його контейнера, і необов'язково щодо всієї сторінки.
Центрування блоків контенту за допомогою CSS
Блоками є будь-які елементи на сторінці, які встановлюються як елементи рівня блоку і мають певну ширину. Часто такі блоки створюються за допомогою
Найбільш поширений спосіб центрування блоків - це задати для лівого і правого відступів значення auto:
Це скорочена форма властивості margin встановить для верхнього і нижнього відступу значення 0. а лівий і правий відступи будуть використовувати значення auto. Таким чином займається все доступне місце і ділиться рівномірно між двома сторонами, що рівносильно HTML div align.
Застосування в HTML:
Оскільки блок має певну ширину, він буде центрирован всередині містить його елемента. Текст, що знаходиться в цьому блоці, буде вирівняний не по центру, а по лівому краю. Так як за замовчуванням в браузерах текст вирівнюється по лівому краю. Щоб текст був також вирівняний по центру, використовуйте властивість text-align. яке ми описували раніше.
Центрування зображень за допомогою CSS
Більшість браузерів відобразять зображення по центру при використанні властивості HTML text align. Але не варто покладатися на цей метод, так як він не рекомендований W3C.
Замість цього слід явно вказати браузеру, що зображення є елементом рівня блоку. Ось код CSS для цього:
Ось HTML код для зображення, яке потрібно центрувати:
Також можна центрувати об'єкти за допомогою вбудованого CSS:
Вертикальне центрування елементів за допомогою CSS
HTML vertical align завжди було проблематичним в веб-дизайні, але з виходом специфікації CSS Flexible Box Layout Module в CSS3. з'явилося рішення для цього завдання.
Вертикальне вирівнювання працює також як і горизонтальне, описане вище. Властивість vertical-align із значенням middle:
Недоліком цього підходу є те, що не всі браузери підтримують CSS FlexBox. Якщо є проблеми з більш ранніми версіями браузерів, W3C рекомендує центрировать текст вертикально в контейнері, використовуючи наступний метод:- Помістіть елементи, які потрібно центрувати, всередину елемента-контейнера, такого як div;
- Задайте мінімальну висоту елементу-контейнера;
- Оголосіть елемент-контейнер;
- Встановіть для HTML vertical align значення middle.
Вертикальне центрування і ранні версії Internet Explorer
Переклад статті «Use CSS to Center Images and Other HTML Objects» був підготовлений дружною командою проекту Сайтобудування від А до Я.