Центрування в CSS: як вирівняти div, текст та багато іншого

Зазвичай самі методи не важкі для розуміння. Натомість це більше пов’язано з тим, що існує багато способів центрування.

Метод, який ви можете використати, залежить від елемента HTML, який ви хочете відцентрувати, або від того, центруєте ви його горизонтально чи вертикально.

У цій публікації ми розглянемо, як відцентрувати різні елементи горизонтально, вертикально та одночасно вертикально і горизонтально.

Як відцентрувати горизонтально

Відцентрувати елементи горизонтально легше, ніж відцентрувати їх вертикально. У публікації подано декілька поширених елементів, які вам, можливо, потрібно відцентрувати горизонтально.

Як відцентрувати текст за допомогою властивості Text-Align Center

Щоб відцентрувати текст або посилання горизонтально, використайте властивість text-align зі значенням center :

Як відцентрувати div за допомогою Margin Auto

Використайте скорочену властивість margin зі значенням 0 auto , щоб горизонтально відцентрувати елементи рівня блоку (наприклад div ):

Як відцентрувати div горизонтально за допомогою Flexbox

Flexbox — найсучасніший спосіб центрування елементів на сторінці, який до того ж полегшує дизайн адаптивних макетів. Однак його не повністю підтримують застарілі браузери, як-от Internet Explorer.

Щоб відцентрувати елемент горизонтально за допомогою Flexbox, застосуйте display: flex та justify-content: center до батьківського елемента:

Як відцентрувати вертикально

Вертикальне центрування елементів без сучасних способів, як-от Flexbox, може бути морокою. Спочатку пробіжимося по старих методах вертикального центрування, а потім я покажу, як це зробити за допомогою Flexbox.

Як відцентрувати div вертикально за допомогою абсолютного позиціювання та від’ємних полів

Довгий час це був популярний спосіб вертикального центрування. Для цього методу потрібно знати висоту елемента, який ви хочете відцентрувати.

Спочатку встановіть властивість position батьківського елемента на relative .

Потім встановіть властивість position дочірнього елемента на absolute та top на 50% :

Але насправді це вертикально відцентрує лише верхній край дочірнього елемента.

Щоб дійсно відцентрувати дочірній елемент, встановіть властивість margin-top на -(половину висоти дочірнього елемента) :

Як відцентрувати div вертикально за допомогою Transform та Translate

Якщо ви не знаєте висоту елемента, який хочете відцентрувати (або навіть якщо знаєте), цей метод — те, що треба.

Цей метод схожий до описаного вище (з від’ємними полями). Встановіть властивість position батьківського елемента на relative .

Для дочірнього елемента встановіть властивість position на absolute та встановіть top на 50% . Тепер замість від’ємних полів використайте transform: translate(0, -50%) :

Зауважте, що translate(0, -50%) є скороченою для translateX(0) та translateY(-50%) . Щоб відцентрувати дочірній елемент вертикально, ви могли також написати transform: translateY(-50%) .

Як відцентрувати div вертикально за допомогою Flexbox

Завдяки Flexbox легко відцентрувати елементи як горизонтально, так і вертикально.

Щоб відцентрувати елемент вертикально, застосуйте display: flex та align-items: center до батьківського елемента:

Як відцентрувати вертикально та горизонтально одночасно

Як відцентрувати div вертикально та горизонтально за допомогою абсолютного позиціювання та від’ємних полів

Цей метод дуже схожий до того, як відцентрувати елемент вертикально. Як і того разу, ви повинні знати ширину та висоту елемента, який хочете відцентрувати.

Встановіть властивість position батьківського елемента на relative .

Потім встановіть властивість position дочірнього елемента на absolute , top на 50% та left на 50% . Це просто відцентрує верхній лівий кут дочірнього елемента вертикально та горизонтально.

Щоб дійсно відцентрувати дочірній елемент, застосуйте від’ємне верхнє поле (встановлене на половину висоти дочірнього елемента) та від’ємне ліве поле (встановлене на половину ширини дочірнього елемента):

Як відцентрувати div вертикально та горизонтально за допомогою Transform та Translate

Використовуйте цей метод, якщо не знаєте точних розмірів елемента або не можете використати Flexbox.

Спочатку встановіть властивість position батьківського елемента на relative .

Потім встановіть властивість position дочірнього елемента на absolute , top на 50% та left на 50% .

Зрештою використайте transform: translate(-50%, -50%) , щоб дійсно відцентрувати дочірній елемент:

Як відцентрувати div вертикально та горизонтально за допомогою Flexbox

Flexbox — це найлегший спосіб відцентрувати елемент як вертикально, так і горизонтально.

Насправді це лише комбінація двох попередніх методів Flexbox. Щоб відцентрувати дочірні елементи горизонтально та вертикально, застосуйте justify-content: center та align-items: center до батьківського елемента:

Це все, що вам потрібно знати про відцентрування. Тепер ви можете сміло відцентрувати що завгодно.

CSS Вирівнювання тексту

Властивість text-align використовується для встановлення горизонтального вирівнювання тексту.

Текст можна вирівняти за лівим або правим краєм, по центру або за шириною.

У наступному прикладі показано вирівнювання по центру, ліворуч і праворуч (вирівнювання за лівим краєм за замовчуванням, якщо напрямок тексту зліва направо, і вирівнювання за правим краєм за замовчуванням, якщо напрямок тексту справа наліво):

Приклад

Коли для властивості text-align встановлено значення “justify”, кожен рядок розтягується таким чином, щоб кожен рядок мав однакову ширину, а ліве та праве поля були прямими (як в журналах і газетах):

Приклад

Text Align Last / Вирівняти останній текст

Властивість text-align-last визначає спосіб вирівнювання останнього рядка тексту.

Приклад

Вирівняти останній рядок тексту в трьох

елементах:

Напрямок тексту

Властивості direction і unicode-bidi можна використовувати для зміни напрямку тексту елемента:

Приклад

Вертикальне вирівнювання

Властивість vertical-align встановлює вертикальне вирівнювання елемента.

Приклад

Встановити вертикальне вирівнювання зображення в тексті:

img.a <
vertical-align: baseline;
>

img.b vertical-align: text-top;
>

img.c vertical-align: text-bottom;
>

CSS Властивості вирівнювання / напрямку тексту

ПАЛІТРА КОЛЬОРІВ

ПРИЄДНУЙТЕСЬ!

Зв’язок з адміном

Якщо ви хочете повідомити про помилку, а також внести пропозиції про роботу сайту, додати оголошення, рекламу на сайт і т.п., відправте адміну електронного листа на email:

Підручники

Довідники

Приклади

Веб-Сертифікати

Цей сайт оптимізований для навчання і тестування. Приклади можуть бути спрощені для поліпшення читання і базового розуміння. Навчальні посібники, посилання і приклади постійно переглядаються, щоб уникнути помилок, але ми не можемо гарантувати повну правильність і працездатність всього контенту. Використовуючи цей сайт, ви погоджуєтеся з тим, що прочитали і прийняли умови використання, cookie і політику конфіденційності.
Також ви можете абсолютно безкоштовно скачати офлайн версію сайту W3Schools українською архівом з GitHub і користуватися локально на своєму комп’ютері.
Також доступна версія сайту W3Schools англійською мовою.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved.
Сайт створений і працює на фреймворку W3.CSS.