Каскадні таблиці стилів CSS поради & прийоми
Дивіться також покажчик всіх прийомів роботи.
Центрування
Загальна функція CSS - центрування тексту або зображення.
Фактично, існує три види центрування:
В останніх реалізаціях CSS ви можете також використовувати
можливості Рівня 3 (CSS3), що дозволяють вирівняти по центру
абсолютно позиційований елементи:
Центрування рядків тексту
Найпоширеніший і (тому) найлегший тип центрування — це
центрування рядків тексту в абзаці або заголовку. Для цього CSS має
властивість 'text-align':
P { text-align: center }
H2 { text-align: center }
яке відображає кожен рядок в абзаці P або заголовку H2 по центру
між полями, ось так:
Всі рядки в цьому абзаці вирівняні
по центру полями абзацу. Це стало можливим завдяки значенню
'center' властивості CSS 'text-align'.
Центрування блоку або зображення
Іноді центрировать потрібно не текст, а блок в цілому. Або,
по-іншому кажучи: ми хочемо, щоб праве і ліве поля були однаковими.
Для цього потрібно встановити поля на 'auto'. Це зазвичай
використовується для блоків з фіксованою шириною, тому що якщо блок
сам по собі гнучкий, він просто займе всю доступну ширину. Ось
приклад:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">Цей доволі ...
Цей досить вузький діапазон тексту центровано.
Зауважте, що рядки всередині блоку не центровані (вони вирівняні
вліво), на відміну від попереднього прикладу.
Цей метод також можна використовувати для центрування
зображення: помістіть його в власний блок і застосуєте властивості
полів. Наприклад:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
Наступне зображення центровано: 
Вертикальне центрування
CSS рівня 2 не має властивість вертикального центрування.
Ймовірно, воно з'явиться у версії CSS рівня 3 (див. нижче). Але навіть в CSS2 ви можете центрувати блоки вертикально за
допомогою комбінування декількох властивостей. Хитрість полягає в
тому, щоб вказати, що зовнішній блок повинен бути відформатований
як осередок таблиці, тому що вміст комірки таблиці може бути вирівняно по центру вертикально.
Приклад, наведений нижче, демонструє центрування абзацу
всередині блоку, який має певну задану висоту. Окремий приклад показує абзац, який
центрирован вертикально в вікні браузера, тому що знаходиться
всередині блоку, позиціонованого абсолютно і по висоті вікна.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>Цей маленький абзац...
</DIV>
Цей маленький абзац центрирован вертикально.
Центрування по вертикалі в CSS рівня 3
Рівень 3 CSS пропонує і інші можливості. На момент написання
цієї статті (2014 рік), гарний спосіб вертикального вирівнювання
блоку без використання абсолютного позиціонування (що може
призводити до часткового перекриття тексту) все ще обговорюється.
Але якщо вам відомо, що часткове перекриття тексту не стане
проблемою в вашому документі, ви можете використовувати властивість
'transform', щоб вирівняти по центру абсолютно позиційований
елемент. Наприклад:
Цей абзац вирівняний вертикально по центру.
Для документа, який виглядає ось так:
<div class=container3>
<p>Цей абзац…
</div>
таблиця стилів виглядає так:
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
Основні правила:
- Зробіть контейнер відносно позиційованим
(position: relative), що перетворить його в контейнер для
елементів що абсолютно позиціонуються.
- Зробіть сам елемент абсолютно позиційованим
(position: absolute).
- Помістіть елемент посередині контейнера за допомогою 'top:
50%'. (Зауважте, що '50% 'тут означають 50% висоти контейнера.)
- Використовуйте translate, щоб перемістити елемент вгору на
половину своєї власної висоти. ( '50% 'в' translate (0,
-50%) 'вказують на висоту самого елемента.)
Нещодавно (починаючи приблизно з 2015-го року) в декількох
реалізаціях CSS стала доступна нова техніка. Вона заснована на
новому ключовому слові 'flex' для властивості 'display'. Це ключове
слово призначене для використання в графічному інтерфейсі
користувача (GUI), але ніщо не заважає вам використовувати його в
документі, якщо у цього документа правильна структура.
Цей абзац вирівняний по центру вертикально.
таблиця стилів виглядає наступним чином:
div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }
Вертикальне і горизонтальне центрування в CSS рівня 3
Ми можемо розширити обидва методи, щоб центрувати по горизонталі
і по вертикалі одночасно.
Побічний ефект абсолютного позиціонування абзацу полягає в тому,
що абзац стає рівно таким широким, яким він повинен бути (якщо
тільки ми явно не вкажемо ширину). У прикладі нижче ми саме цього і
хочемо: ми розміщуємо по центру абзац з одного слова ("Центр!"),
Так що ширина абзацу повинна бути рівна ширині цього слова.
Жовтий фон наочно демонструє, що абзац дійсно тієї ж ширини, що
і його вміст. Ми маємо на увазі, що розмітка залишилася колишньою:
<div class=container4>
<p>Центр!
</div>
У плані вертикального центрування ця таблиця стилів схожа з
таблицею з попереднього прикладу. Але тепер ми ще рухаємо елемент
навпіл через контейнер за допомогою правила 'left: 50%' і одночасно
зрушуємо його вліво на половину своєї власної ширини в перетворенні
'translate':
div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
Наступний приклад пояснює, навіщо потрібно правило
'margin-right: -50%'.
Коли форматер CSS підтримує 'flex', все стає ще легше:
з цією таблицею стилів:
div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }
тобто єдиним доповненням є 'justify-content: center'. Точно так,
як 'align-items' визначає вертикальне вирівнювання вмісту
контейнера, 'justify-content' таким же чином визначає горизонтальне
вирівнювання. (Насправді все трохи складніше, як випливає з їхніх
назв, але в простому випадку, працює це саме так.). Побічний ефект
від застосування властивості 'flex' полягає в тому, що дочірній
елемент, в нашому випадку це Р, автоматично стає настільки малим,
наскільки це можливо.
Центрування в області перегляду в CSS рівня 3
Контейнером за замовчуванням для абсолютно позиціонуються
елементів є область перегляду. (В разі c браузером це вікно
браузера). Таким чином, центрування елемента в області перегляду не
викликає складності. Нижче наведено повний приклад. (В цьому
прикладі використаний синтаксис HTML5.)
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h1>Красиво вирівняний по центру</h1>
<p>Цей текстовий блок вирівняний вертикально по центру.
<p>І горизонтально, якщо вікно досить широке.
</section>
Ви можете побачити результат в окремому
документі.
Правило 'margin-right: -50%' необхідно для компенсації 'left:
50% '. Правило 'left' зменшує доступну для елемента ширину на
50%. Тому визуализатор намагатиметься зробити лінії завдовжки не
більше половини ширини контейнера. Вказавши на те, що праве поле
елемента знаходиться правіше на ту ж саму величину, відзначимо, що
максимальна довжина лінії знову дорівнює ширині контейнера.
Спробуйте змінити розмір вікна: ви побачите, що кожне речення
знаходиться на одному рядку, коли вікно досить широке. Тільки тоді,
коли вікно занадто вузьке для всього пропозиції, цю пропозицію буде
розбито на кілька рядків. Коли ви видалите правило 'margin-right:
-50%' і знову змініть розмір вікна, ви помітите, що пропозиції
будуть вже розбиті, хоча вікно все ще ширше рядків тексту в два
рази.
(Використання властивості 'translate' для центрування в області
перегляду було вперше запропоновано "Charlie" в відповіді на сайті Stack Overflow.)
