Все про css вирівнювання
Кожен верстальник постійно стикається з необхідністю вирівнювання контенту в блоці: по горизонталі або по вертикалі. Є кілька непоганих статей із цього приводу, але всі вони пропонують багато цікавих, але мало практичних варіантів, через що доводиться витрачати зайвий час, щоб виділити головне. Вирішила подати цю інформацію в тій формі, яка зручна мені, щоб більше не гуглити.
Вирівнювання блоків з відомими розмірами
Найпростіше з допомогою CSS вирівняти блоки, у яких заздалегідь відома висота (для вирівнювання по вертикалі) або ширина (для горизонтального вирівнювання).
Вирівнювання за допомогою padding
Іноді годі й центрировать елемент, а додати йому кордону властивістю "padding".
Наприклад, є картинка 200 на 200 пікселів, і потрібно центрувати її в блоці 240 на 300. Чи можемо поставити висоту і ширину зовнішнього блоку = 200px, і додати по 20 пікселів зверху і знизу, і по 50 зліва і справа.
Вирівнювання абсолютно позиціонуються блоків
Якщо для блоку задано "position: absolute", тоді його можна позиціонувати щодо найближчого батька з "position: relative". Для цього потрібно всім властивостям ( "top", "right", "bottom", "left") внутрішнього блоку привласнити однакове значення, а також "margin: auto".
горизонтальне вирівнювання
Вирівнювання за допомогою "text-align: center"
Для вирівнювання тексту в блоці є спеціальний властивість "text-align". При встановленому значенні "center" кожен рядок тексту вирівняється по горизонталі. Для багаторядкового тексту таке рішення використовується вкрай рідко, частіше цей варіант можна зустріти для вирівнювання span десятків, посилань або картинок.
Одного разу мені довелося придумувати текст, щоб показати, як працює вирівнювання тексту за допомогою CSS, але нічого цікавого в голову не приходило. Спочатку вирішила скопіювати десь дитячий віршик, але згадала, що це, можливо, зіпсує унікальність статті, і наші дорогі Новомосковсктелі не зможуть знайти її в Гуглі. І тоді я вирішила написати ось цей ось абзац - адже суть не з нього, а суть у вирівнюванні.
Варто зауважити, що це властивість буде працювати не тільки для тексту, а й для будь-яких малих елементів ( "display: inline").
А ось цей текст вирівняний по лівому краю, зате він знаходиться в блоці, який вирівнюється щодо обгортки по центру.
Вирівнювання блоків за допомогою margin
Блокові елементи з відомою шириною легко вирівнюються по горизонталі, якщо встановити їм "margin-left: auto; margin-right: auto". Зазвичай використовується скорочений запис: "margin: 0 auto" (замість нуля може бути будь-яке значення). Але ось для вирівнювання по вертикалі такий спосіб не підійде.
Саме так стоїть вирівнювати всі блоки, де це можливо (де не потрібно фіксоване або абсолютне позиціонування) - він самий логічний і адекватний. Хоч це і здається очевидним, але іноді бачила страхітливі приклади з негативними відступами, тому вирішила уточнити.
вертикальне вирівнювання
З вертикальним вирівнюванням набагато більше проблем - як видно, таке в CSS не було передбачено. Є кілька способів добитися бажаного результату, але всі вони не дуже гарні.
Вирівнювання властивістю line-height
У тому випадку, коли в блоці тільки один рядок, можна домогтися її вирівнювання по вертикалі, застосувавши властивість "line-height" і встановивши йому бажану висоту. Для надійності варто встановити ще і "height", значення якого буде дорівнює значенню "line-height", тому що останні підтримується не у всіх браузерах.
Це фіолетова рядок, висота якої дорівнює висоті блоку.
Так само можливо домогтися вирівнювання блоку з кількома рядками. Для цього доведеться використовувати додатковий блок-обгортку, і встановлювати висоту рядка йому. Внутрішній блок може бути багаторядковим, але обов'язково "inline". До нього потрібно застосувати "vertical-align: middle".
А це inline-елемент. Тут кілька помаранчевих
рядків. вони вирівнюють
за рахунок встановленої висоти рядка блоку-батька.
У блоку обгортки має бути встановлено "font-size: 0". Якщо не встановити нульовий розмір шрифту, то браузер додасть від себе кілька зайвих пікселів. Також доведеться вказати розмір шрифту і висоту рядка для внутрішнього блоку, адже ці властивості успадковуються від батьків.
Вирівнювання по вертикалі в таблицях
Властивість "vertical-align" також діє на елементи таблиці. C встановленим значенням "middle", контент всередині осередку вирівнюється по центру. Звичайно, таблична верстка в наш час вважається архаїчної, але у виняткових випадках можна симулювати її, вказавши "display: table-cell".
Зазвичай для вирівнювання по вертикалі користуюся саме цим варіантом. Нижче приклад верстки, взятий з готового вже проекту. Інтерес представляє саме картинка, яка центрується по вертикалі даними способом.
