Як вирівняти блоки в css

15

Від автора: знову вітаю вас на сторінках нашого блогу. У сьогоднішній статті я хотів би розповісти про різних прийомах вирівнювання, яке можна застосовувати як до комп’ютерів, так і до їх вмісту. Зокрема, як вирівняти блоки в css, а також про вирівнювання тексту.

Вирівнювання блоків по центру

В css вирівняти блок по центру легко. Це самий відомий багатьом прийом, але про нього я хотів би розповісти саме зараз, в першу чергу. Тут мається на увазі вирівнювання по центру по горизонталі щодо батьківського елементу. Як воно здійснюється? Припустимо, у нас є контейнер і в ньому наш піддослідний:

Припустимо, що це шапка сайту. Вона не тягнеться на всю ширину вікна і нам треба її відцентрувати. Пишемо так:

#header{
width/max-width: 800px;
margin: 0 auto;
}

Нам потрібно вказати точну або максимальну ширину, після чого записати ключове властивість – margin: 0 auto. Воно задає зовнішні відступи нашої шапці, перше значення визначає відступи зверху і знизу, а друга – праворуч і ліворуч. Значення auto дає команду браузеру автоматично розрахувати відступи з обох боків так, щоб елемент був рівно по центру батьківського. Зручно!

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

Це теж дуже простий прийом. Для вирівнювання всіх рядкових елементів можна використовувати властивість text-align та його значення: left, right, center. Останнім центрує текст, що нам і потрібно. Таким же чином можна вирівняти навіть картинку, бо вона теж за замовчуванням є рядковим елементом.

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

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

Задати висоту блоку з допомогою внутрішніх відступів. Спосіб полягає в тому, щоб не задавати явну висоту з допомогою height, а створити штучно з допомогою paddingов зверху і знизу, які повинні бути однакові. Створимо будь-який блок і запишемо йому такі властивості:

div{
background: #ccc;
padding: 30px 0;
}

Фон просто для того, щоб візуально бачити краю, а також внутрішні відступи. Тепер висоту блоку складають два цих відступу і сам рядок, а виглядає це так:

Як вирівняти блоки в css

Визначити для блоку line-height. Мені здається, це більш правильний спосіб, якщо вам треба вирівняти один рядок тексту. При ньому ви можете записати висоту по нормальному, з допомогою свойсва height. Після цього йому ж потрібно задати висоту рядка, таку ж, як і висота блоку в цілому.

div{
height: 60px;
line-height: 60px;
}

Результат буде аналогічний вищенаведеної картинці. Все буде працювати, навіть якщо ви додасте внутрішні відступи. Однак, тільки для одного рядка. Якщо вам потрібно більше тексту в елементі, то даний спосіб працювати не буде.

Перетворити блок у комірку таблиці. Суть цього методу в тому, що для комірки таблиці діє властивість vertical-align: middle, яка центрує елемент по вертикалі. Відповідно, у цьому випадку блоку потрібно задати наступне:

div{
display: table cell;
vertical-align: middle;
}

Цей спосіб хороший тим, що ви зможете вирівняти скільки завгодно тексту по центру. Але блоку, в який вкладено наш div краще прописати display: table, інакше може не працювати.

Як вирівняти блоки в css

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

Задати відступи у відсотках. Якщо ви знаєте висоту батьківського елемента і ставите в нього ще один блоковий елемент, то відцентрувати його можна з допомогою процентних відступів. Наприклад, батько має висоту 600 пікселів. Ви ставите в нього блок, який має висоту 300 пікселів. Скільки вам потрібно відступити зверху і знизу, щоб відцентрувати його? По 150 пікселів, а це 25% від висоти батьків.

Цей спосіб дозволяє зробити центрування тільки коли розміри дозволяють зробити обчислення. А якщо у вас батько 887 пікселів у висоту, то точно записати нічого не вийде, це і так зрозуміло.

Вставити елемент у комірку таблиці. Знову ж таки, якщо ми перетворимо батьківський елемент в клітинку таблиці, то вставленими в нього блок автоматом отцентрируется по вертикалі. Для цього батькам потрібно лише задати vertical-align: middle.

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

Як вирівняти блоки в css

Використовувати абсолютне позиціонування. Про цьому способі мало хто знає. Потрібно вставити в css такий код:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;

Його потрібно дописати до стилів елемента, який потрібно відцентрувати. Якщо ви зараз поновіть сторінку, то він буде вирівняно по центру сторінки, а нам треба зробити це відносно батьківського блоку. Для цього батьківського потрібно задати position: relative і тоді відлік координат буде вестися не від краю вікна, а від батьківського контейнера.

Використовувати флексбокс. Найсучасніший метод! Для цього контейнера потрібно записати в стилі властивість display: flex, а його вкладеному блоку – margin: auto. Елемент буде вирівняно по центру, причому і по горизонталі, і по вертикалі.

Якщо вам потрібно вирівнювання тільки по вертикалі, то можна записати, наприклад, так: margin: auto 0.

Як бачимо, в css вирівняти текст по вертикалі в блоці можна, причому не одним способом. Інша справа, що одного єдино правильного та оптимального рішення ще немає, так що доведеться підлаштовуватися і в кожному конкретному випадку робити по-різному.

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