Каскадні таблиці стилів CSS поради & прийоми

Найпоширеніший і (тому) найлегший тип центрування - це центрування рядків тексту в абзаці або заголовку. Для цього CSS має властивість 'text-align':

яке відображає кожен рядок в абзаці P або заголовку H2 по центру між полями, ось так:

Всі рядки цього абзацу вирівняні по центру полями абзацу. Це стало можливим завдяки значенню 'center' властивості CSS 'text-align'.

Центрування блоку чи зображення

Іноді центрувати потрібно не текст, а блок загалом. Або, інакше кажучи: ми хочемо, щоб праве та ліве поля були однаковими. Для цього потрібно встановити поля на auto. Це зазвичай використовується для блоків із фіксованою шириною, тому що якщо блок сам по собі гнучкий, він просто займе всю доступну ширину. Ось приклад:

P.blocktext < margin-left: auto; margin-right: auto; width: 6em >. Цей досить.

Цей досить тонкий блок тексту центрований. Зауважте, що рядки всередині блоку не центровані (вони вирівняні вліво), на відміну попереднього прикладу.

Цей метод також можна використовувати для центрування зображення: помістіть його у власний блок та застосуйте властивості полів. Наприклад:

Наступне зображення центроване:

Вертикальне центрування

CSS рівня 2 не має властивості вертикального центрування. Ймовірно, воно з'явиться у версії CSS рівня 3 (див. нижче). Але навіть у CSS2 можна центрувати блоки вертикально за допомогою комбінування декількох властивостей. Хитрість у тому, щоб зазначити, що зовнішній блок може бути відформатований як осередок таблиці, т.к. вміст комірки таблиці може бути вирівняне по центру вертикально.

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

DIV.container < min-height: 10em; display: table-cell; vertical-align: middle >.  
Цей маленький абзац.

Цей маленький абзац центрується вертикально.

Центрування по вертикалі в CSS рівня 3

Рівень 3 CSS пропонує інші можливості. На момент написання цієї статті (2014 рік) хороший спосіб вертикального вирівнювання блоку без використання абсолютного позиціонування (що може призводити до часткового перекриття тексту) все ще обговорюється. Але якщо ви знаєте, що часткове перекриття тексту не стане проблемою у вашому документі, ви можете використовувати властивість 'transform', щоб вирівняти по центру абсолютно позиціонований елемент. Наприклад:

Цей абзац вирівняно вертикально по центру.

Для документа, який виглядає так:

таблиця стилів виглядає так:

div.container3 < height: 10em;  position: relative > /* 1 */ div.container3 p < margin: 0;  position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) > /* 4 */

1. Зробіть контейнер щодо позиціонованого (position: relative), що перетворить його на контейнер для абсолютно позиціонованих елементів.
2. Сам елемент зробіть абсолютно позиціонованим (position: absolute).
3. Помістіть елемент усередині контейнера за допомогою 'top: 50%'. (Зверніть увагу, що '50%' тут означають 50% висоти контейнера.)
4. Використовуйте translate, щоб перемістити елемент вгору на половину власної висоти. ( '50%' в 'translate(0, -50%)' вказують на висоту самого елемента.)

Нещодавно (починаючи приблизно з 2015 року) у кількох реалізаціях CSS стала доступна нова техніка. Вона ґрунтується на новому ключовому слові 'flex' для властивості 'display'. Це ключове слово призначене для використання в графічному інтерфейсі користувача (GUI), але ніщо не заважає вам використовувати його в документі, якщо цей документ має правильну структуру.

Цей абзац вирівняний по центру вертикально.

таблиця стилів виглядає так:

Вертикальне та горизонтальне центрування у CSS рівня 3

Ми можемо розширити обидва методи, щоб центрувати по горизонталі та по вертикалі одночасно.

Побічний ефект абсолютного позиціонування абзацу полягає в тому, що абзац стає таким широким, яким він має бути (якщо тільки ми явно не вкажемо ширину). У прикладі нижче ми саме цього і хочемо: ми розміщуємо по центру абзац з одного слова (“Центр!”), так що ширина абзацу має дорівнювати ширині цього слова.

Жовте тло наочно демонструє, що абзац дійсно тієї ж ширини, що і його вміст. Ми маємо на увазі, що розмітка залишилася колишньою:

У плані вертикального центрування ця таблиця стилів схожа на таблицю з попереднього прикладу. Але тепер ми ще переміщуємо елемент на півдорозі через контейнер за допомогою правила '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', все стає легше:

з цією таблицею стилів:

тобто єдиним доповненням є 'justify-content: center'. як випливає з їх назв, але в простому випадку, працює це саме так.). полягає в тому, що дочірній елемент, у нашому випадку це Р, автоматично стає настільки малим, наскільки це можливо.

Центрування в області перегляду в CSS рівня 3

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

Гарно вирівняний по центру
Цей текстовий блок вертикально вирівняний по центру. 
І горизонтально, якщо вікно досить широке.

Ви можете побачити результат у окремому документі.

Правило 'margin-right: -50%' необхідно для компенсації 'left: 50%' Правило 'left' зменшує доступну для елемента ширину на 50%. праве поле елемента знаходиться правіше на ту саму величину, відзначимо, що максимальна довжина лінії знову дорівнює ширині контейнер.

Спробуйте змінити розмір вікна: ви побачите, що кожна пропозиція знаходиться на одному рядку, коли вікно досить широке.Коли ви видалите правило 'margin-right: -50%' і знову зміните розмір вікна, ви помітите, що пропозиції будуть розбиті, хоча вікно все ще ширше рядків тексту вдвічі.

Навігація сайтом

Created 5 May 2001;
Last updated Ср 06 Січ 2021 05:40:49

Як вирівняти по центру в CSS

Як часто у вас, як у веб-дизайнера, виникає завдання за допомогою CSS вирівняти по центру якийсь елемент на сторінці? Іноді це зробити дуже легко, а іноді доводиться повозитися. У цій статті пропоную раз і назавжди розібратися в цьому питанні, щоб вирівнювання CSS не викликало у вас жодних проблем.

Усі приклади у статті інтерактивні. Розміри та розташування елементів у них можна змінювати. Для цього потрібно просто.

Підказка: наведіть курсор на нижній правий кут.

Як у CSS вирівняти по горизонталі?

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

text-align: center

Найшвидший і найпростіший спосіб вирівняти текст або зображення по центру батьківського елемента – використовувати властивість CSS text-align: center . Щоб цей метод працював, елементи, які ви хочете відцентрувати, повинні мати властивість display - inline або inline-block, а їхній батьківський елемент повинен бути блоковим (block або inline-block). Тому якщо text-align: center не працює, перевірте, чи все гаразд із властивістю display .

margin: auto

За допомогою властивості margin можна центрувати блокові елементи. Однак margin: auto працює лише для вирівнювання по горизонталі. До того ж, обов'язково має бути задана ширина (width, min-width або max-width). Якщо її не встановити, блок розтягнеться на всю ширину батьківського елемента.

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

Як у CSS вирівняти по вертикалі?

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

padding або line-height

Припустимо, вам потрібно вирівняти весь вміст елемента центром вертикально, тобто. потрібно, щоб відстань від верхньої межі елемента до верхнього краю контенту дорівнювала відстані від нижньої межі елемента до нижнього краю контенту. Для цього можна просто задати рівні вертикальні відступи padding.

Інший спосіб – вирівнювання вмісту по вертикальному центру за допомогою властивості line-height. Він підійде тоді, коли висота елемента фіксована і задана за допомогою властивості height, а вміст цього елемента міститься в один рядок (згодний, занадто багато обмежень).

 .container < height: 36px; white-space: nowrap; >.container div, .container span < line-height: 36px; >.inline-block  
Lorem ipsum
Dolor sit amet

Зверніть увагу, що значення height і line-height мають бути рівними.

vertical-align: middle

Властивість CSS vertical-align вирівнює елемент по вертикалі щодо батьківського елемента, що оточує текст або осередок таблиці. Однак із ним не все так просто. Ця властивість працює тільки для inline-елементів (span, img і т.д) та елементів з display: inline-block;

Крім того, за допомогою властивості vertical-align можна вирівняти по вертикалі вміст клітинок таблиці. Цим можна скористатися для того, щоб вирівняти блоковий елемент, хакнути систему, так би мовити.

Для того, щоб цей метод працював, як задумано, потрібно задати абсолютні (px) розміри батьківського елемента. У дочірнього елемента ширина та висота можуть бути відносними (наприклад, %).

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

transform: translate()

Властивість CSS transform дозволяє рухати, обертати, змінювати розмір та форму елемента. Цей інструмент є справжнім must have для створення сучасних адаптивних та інтерактивних дизайнів. Тому йому буде присвячена окрема стаття (а може й дві;)

У рамках цієї статті розглянемо використання властивості transform c функцією translate() як значення. Суть методу зводиться до такого:

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

Отже, ми вирівняли елемент центром. Чи не зовсім центром? Справа в тому, що по центру вирівнюється верхній лівий кут блоку (так би мовити, початок його координат). Якщо блок має фіксований розмір і він нам відомий, можна зрушити його (блок) на відстань рівну половині розміру за допомогою margin .

Але краще скористатися чарівною властивістю transform: translate(-50%, -50%); Воно також зсуває блок на половину його довжини та висоти відповідно, при цьому нам не потрібно вказувати абсолютні розміри. Для адаптивного дизайну, що потрібно!

flexbox CSS

Flexbox - сучасний і дуже гнучкий спосіб розташування елементів на сторінці, який дозволяє легко створювати красиві інтерфейси, не засмічуючи код зайвою розміткою і стилями. Я дуже рекомендую вам їх опанувати. У найближчих постах обов'язково розповім про нього докладніше.

Ну а поки повернемося до вирівнювання центром.

Тепер давайте розберемося, що це означає.

display: flex

За допомогою цієї властивості перетворимо батьківський елемент на так званий гнучкий контейнер (flex container), при цьому всі вкладені елементипершого рівня (тобто безпосередні дочірні елементи) стають так званими гнучкими елементами(flex items), і разом це все складає flexbox лейаут.

justify-content: center

Ця властивість вирівнює вміст контейнера по центру вздовж основної осі. Одним з ключових моментів моделі flexbox є вісь, вздовж якої розташовуються елементи контейнера (властивість flex-direction ). Ось може бути або горизонтальною (row або row-reverse), або вертикальною (column або column-reverse). За умовчанням використовується значення row, тобто. наші елементи розташовуються по горизонтальній осі зліва направо.

align-items: center

Крім основної осі у flexbox є перпендикулярна їй другорядна вісь. У цьому випадку вона вертикальна. Властивість align-items описує, як елементи контейнера розташовані щодо неї.

Ось приблизно те, що має вийти.

Перевага цього методу у його лаконічності, адаптивності (я маю на увазі респонсивність) і, звичайно, гнучкості. Так, наприклад, якщо вам потрібно, щоб по центру був не один блок, а кілька - просто додайте їх в HTML, ніяких змін до CSS вносити при цьому не потрібно. Ну хіба не краса?!

Як ви, напевно здогадалися, я волію використовувати саме цей спосіб. Але це не означає, що я не користуюсь іншими. Всі ці способи можна і потрібно використовувати (за винятком способу з vertical-align: middle і display: table-cell), кожен у своїй ситуації. Наприклад, нема чого використовувати flexbox якщо вам просто потрібно вирівняти текст або картинку по центру горизонтально.

Сподіваюся, ви знайшли у цій статті те, що шукали. А якщо ні, запитайте у коментарях, я обов'язково відповім. Всім успішного центрування!

Як вирівняти блок по центру?

Використовуйте display: flex + align-items або justify-content:

body < margin: 0; -radius: 10px; width: 210px; text-transform: uppercase; #fff; >button:first-child < background-color: #f7600e;

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

Покладіть ваш блок .btns в якийсь гнучкий контейнер, у нього властивість display має бути рівною flex . І за допомогою align-items і justify-content задайте вирівнювання.

display: flex; justify-content: center;

.centeral-container < display: flex; justify-content: center; center;