Горизонтальне та вертикальне вирівнювання

admin2025

Центрування елементів
по горизонталі та вертикалі

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

Щоб горизонтально вирівняти по центру блоковий елемент (наприклад, ) можна використовувати властивість margin: auto; .

Визначення ширини елемента запобігає його витягуванню до меж контейнера.

При таких установках елемент займе задану ширину, а простір, що залишиться, буде порівну поділено між двома відступами:

Цей елемент div розташований по центру.

Увага! Вирівнювання по центру не працюватиме, якщо властивість width не встановлено (або встановлено в 100%).

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

Щоб усередині елемента вирівняти лише текст, використовується властивість text-align: center; .

Цей текст вирівняний центром.

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

Щоб вирівняти зображення по центру, потрібно зробити елемент блоковим і встановити лівий та правий відступи значення auto :

Вирівнювання по лівому/правому краю – Використовуємо властивість position

Один із способів вирівняти елемент по лівому або правому краю, це використовувати властивість position: absolute; :

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

Увага! Абсолютне позиціонування елемента видаляє його із звичайного потоку виведення. Внаслідок цього такий елемент може переривати інші елементи.

Вирівнювання по лівому/правому краю – Використовуємо властивість float

Інший спосіб вирівняти елемент по лівому або правому краю, це використовувати властивість float :

Прийом clearfix

Якщо висота плаваючого елемента (із заданою властивістю float ) більше, ніж висота його контейнера, він буде "переповнювати" його і виходити за його межі. Щоб це виправити, можна скористатися спеціальним прийомом clearfix.

Без clearfix

З clearfix

Ми можемо додати до елемента контейнера спеціальний код, який вирішить цю проблему:

Центрування по вертикалі – Використовуємо властивість padding

У CSS існує безліч методів центрування елемента по вертикалі. Найпростіше рішення, це використовувати властивості padding-top і padding-bottom:

Я центрований по вертикалі.

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

Я центрований вертикально та горизонтально.

Центрування по вертикалі – Використовуємо властивість line-height

Ще один спосіб центрувати елемент вертикально, це використовувати властивість line-height зі значенням, що дорівнює значенню властивості height :

Я центрований вертикально та горизонтально.

 .center < line-height: 200px; height: 200px; border: 3px solid green; text-align: center; >/* Якщо у тексті кілька рядків, додайте такий код: */ .center p

Центрування по вертикалі – Використовуємо властивості position та transform

Якщо властивості padding і line-height використовувати не хочеться, тобто інше рішення – використовувати позиціонування та властивість transform:

Я центрований вертикально та горизонтально.

Центрування по вертикалі – Використовуємо Flexbox

Також, щоб елемент розмістити центром, можна використовувати flexbox. Слід лише пам'ятати, що flexbox не підтримується в браузерах IE10 та більш ранніх версій:

Горизонтальне та вертикальне вирівнювання - Priroda.v.ua

Модуль CSS Box Alignment визначає CSS-функції, які відносяться до вирівнювання ящиків у різних моделях макета CSS: макет блоку, макет таблиці, гнучка макет та макет сітки. Модуль орієнтований створення узгодженого способу вирівнювання за всіма CSS. У цьому вся документі описуються загальні поняття, які у специфікації.

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

Старі методи вирівнювання

CSS традиційно мали дуже обмежені можливості вирівнювання. Ми могли вирівняти текст, використовуючи text-align центральні блоки, використовуючи auto margin s, а в макетах таблиці або вбудованого блоку, використовуючи vertical-align властивість. Вирівнювання тексту тепер покривається модулями Inline Layout та CSS Text, і вперше в Box Alignment ми маємо повні можливості горизонтального та вертикального вирівнювання.

Якщо ви спочатку дізналися Flexbox, ви можете вважати ці властивості частиною специфікації Flexbox і деякі властивості дійсно перераховані в Level 1 Flexbox. Однак у специфікації наголошується, що специфікація Box Alignment має розглядатися, оскільки вона може додати додаткові можливості порівняно з тим, що зараз перебуває у Flexbox.

Основні приклади

Наступні приклади демонструють, як деякі з Box Alignment Properties застосовуються у Grid and Flexbox.

Приклад вирівнювання розкладки сітки CSS

У цьому прикладі з використанням Grid Layout, в контейнері сітки є додатковий простір після прокладання фіксованих доріжок ширини на осі.Цей простір розподіляється за допомогою justify-content. На блоковій (поперечній) осі вирівнювання елементів усередині їх областей сітки контролюється за допомогою align-items. Перший елемент перевизначає значення елементів вирівнювання, задане групи, шляхом установки align-self в центр.

Приклад вирівнювання Flexbox

У цьому прикладі три елементи гнучкості вирівняні по головній осі з використанням justify-content і на поперечній осі з використанням align-items. Перший елемент перевизначає align-items , задані групи align-self по center .

Ключові поняття та термінологія

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

Зв'язок із режимами запису

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

Два виміри вирівнювання

При використанні властивостей вирівнювання осередків ви вирівняєте вміст по одній із двох осей – inline (або main) осі та block (або cross) осі. Внутрішня вісь – це вісь, через яку використовуються слова в потоці речення в режимі запису – для англійської мови, наприклад, вбудована вісь горизонтальна. Вісь блоку – це вісь, вздовж якої викладені блоки, такі як елементи абзацу, і проходить осі Inline.

При вирівнюванні елементів на вбудованій осі ви використовуватимете властивості, що починаються з justify- :

При вирівнюванні елементів на осі блоку ви використовуватимете властивості, які починаються з align- :

Flexbox додає додаткове ускладнення в тому, що вище зазначено вірно, коли flex-direction встановлено в row . Властивості змінюються місцями, коли flexbox встановлений у column . Тому при роботі з flexbox легше думати про головну та поперечну осі, а не про лінію та блок. Властивості justify-завжди використовуються для вирівнювання по головній осі, align-на поперечній осі.

The alignment subject

Об'єкт вирівнювання – це те, що вирівняно. Для justify-self , або align-self , або при налаштуванні цих значень як групи justify-items або align-items це буде поле елемента, в якому використовується ця властивість. Властивості justify-content і align-content відрізняються кожному за методу макета.

The alignment container

Контейнер вирівнювання – Це поле, в якому об'єкт вирівнюється всередині. Зазвичай це буде блок, що містить об'єкт вирівнювання. Контейнер вирівнювання може містити один або кілька об'єктів вирівнювання.

На малюнку показаний контейнер вирівнювання з двома об'єктами вирівнювання всередині.

Fallback alignment

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

Типи вирівнювання

Існує три різні типи вирівнювання, які специфікують деталі; вони використовують значення ключових слів.

Positional alignment (вирівнювання положення): вказує положення об'єкта вирівнювання щодо його контейнера вирівнювання.
Baseline alignment (вихідне вирівнювання): ці ключові слова визначають вирівнювання як взаємозв'язок між базовими лініями кількох об'єктів вирівнювання у контексті вирівнювання.
Distributed alignment (розподілене вирівнювання): ці ключові слова визначають вирівнювання як розподіл простору між об'єктами вирівнювання.

Значення ключових слів позиціонування

Наступні значення визначені для позиційного вирівнювання і можуть використовуватися як значення для вирівнювання вмісту з justify-content і align-content, а також для самовирівнювання з justify-self та align-self.

center
start
end
self-start
self-end
flex-start for Flexbox only
flex-end for Flexbox only
left
right

Крім фізичних значень left і right , які відносяться до фізичних атрибутів екрана, всі інші значення є логічними значеннями та відносяться до режиму запису вмісту.

Наприклад, при роботі в CSS Grid Layout, якщо ви працюєте російською мовою і встановлюєте для нього значення justify-content start , це призведе до переміщення елементів у вбудованому вимірі на початок, який буде лівим, оскільки пропозиції російською починаються зліва. Якщо ви використовували арабську мову, право на ліву мову, те саме значення start призведе до того, що елементи переміщаються вправо, оскільки пропозиції арабською мовою починаються з правого боку сторінки.

Обидва ці приклади мають justify-content: start , проте розташування початку змінюється відповідно до режиму запису.

Вихідне вирівнювання

Ключові слова вирівнювання базової лінії використовуються для вирівнювання базових ліній ящиків групи суб'єктів вирівнювання. Вони можуть використовуватися як значення для вирівнювання контенту за допомогою justify-content і align-content, а також для самовирівнювання з justify-self і align-self.

Вихідне вирівнювання вмісту – вказівка значення вирівнювання базової лінії для justify-content або align-content – працює у методах макета, які містять елементи у рядках. Об'єкти вирівнювання вирівнюються по базовій лінії один до одного, додаючи до них поля.

Вихідна лінія вирівнювання зсуває поля для вирівнювання базової лінії шляхом додавання поля за межами полів. Self alignment – це використання justify-self або align-self або при налаштуванні цих значень у вигляді групи з justify-items та align-items.

Distributed alignment

Ключові слова розподіленого вирівнювання використовуються з параметрами align-content та justify-content . Ці ключові слова визначають, що відбувається з додатковим простором після відображення об'єкта. Значення такі:

Наприклад, елементи Flex Layout спочатку вирівняні за допомогою flex-start. Працюючи в горизонтальному верхньому та нижньому режимах запису, такому як російський, з flex-direction у вигляді row елементи починаються в крайньому лівому кутку і будь-яке вільне місце після відображення елементів поміщається після елементів.

Якщо ви встановлюєте justify-content: space-between у контейнері flex, доступний простір тепер розділяється та поміщається між елементами.

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

Вирівнювання переповнення

safe та unsafe ключові слова допомагають визначити поведінку, коли об'єкт вирівнювання більший, ніж контейнер вирівнювання. Ключове слово safe буде вирівнюватися для start у разі заданого вирівнювання, що викликає переповнення, метою якого є уникнути втрати даних, коли частина елемента знаходиться за межами меж контейнера вирівнювання і не може бути прокручена до.

Якщо ви вкажете unsafe, вирівнювання буде виконано, навіть якщо це призведе до такої втрати даних.

Прогалини між boxes

Специфікація вирівнювання коробки також включає властивості gap, row-gap та column-gap. Ці властивості дозволяють встановити постійний розрив між елементами у рядку або стовпці в будь-якому методі макета, який має елементи, які розташовані таким чином.

Властивість gap є скороченням для row-gap і column-gap , що дозволяє одразу встановити ці властивості:

У наведеному нижче прикладі макет сітки використовує скорочену gap , щоб встановити 10px розрив між доріжками рядків і 2em розрив між доріжками стовпців.

У цьому прикладі я використовую властивість grid-gap на додаток до gap. Початкові властивості зазору були попередньо префіксними grid-у специфікації Grid Layout, а деякі браузери підтримують лише ці префіксні версії.

Префіксні версії будуть підтримуватись як псевдонім непідписаних, однак ви завжди можете подвоїти так, як це було б з префіксами постачальника, додавши властивість grid-gap, а потім властивість gap з тими самими значеннями.

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

Сторінки, що деталізують індивідуальні властивості вирівнювання

Оскільки властивості вирівнювання полів CSS реалізовані по-різному залежно від специфікації, з якою вони взаємодіють, зверніться до наступних сторінок для кожного типу макета для отримання детальної інформації про те, як використовувати з ним властивості вирівнювання:

Довідка

CSS Properties

Glossary Entries

Горизонтальне та вертикальне вирівнювання - Priroda.v.ua

Веб-розробнику важливо не лише поставити контент на сторінку сайту, а й зробити це красиво. Для цього важливо знати, як вирівняти блок по центру CSS. Головна складність у тому, що мова існує з 1996 року, і за цей час зібралося багато способів вирівняти блок центром. У цій статті розглянемо основні та найзручніші підходи до того, як відцентрувати блок у CSS.

Підготовка проекту

Безкоштовний профорієнтаційний проект

Пройдіть тест та визначте ваш напрямок у IT. Вигравайте призи, отримуйте подарунки та особистий план розвитку через безкоштовні гайди та кар'єрну консультацію.

Всі приклади вирівнювання розглядатимемо на блоках

з текстом усередині, але застосовувати способи можна до будь-якого вмісту сторінки. Для більшої наочності додамо стилі, встановивши кольори, шрифти та відступи. Батьківський блок буде з межею зеленого кольору, а дочірні – жовтого. Так краще видно, як блоки взаємодіють один з одним.

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

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

 Текстовий блок 1
 Текстовий блок 2

Вирівнювання по горизонталі

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

Автовідступи

Горизонтальне вирівнювання в CSS – це розставляння відступів по лівому та правому краю блоку. У СSS для цього є властивості margine-left та margine-right. Для них можна встановлювати значення вручну, а можна довірити це завдання CSS. Для цього виберіть автоматичне керування відступами за допомогою auto і встановіть ширину блоків за допомогою властивості width .

 Текстовий блок 1
 Текстовий блок 2

Коли у вас на сторінці кілька блоків, автовідступи поміщають кожен новий елемент під минулим та формують стос із блоків. Це важливо враховувати під час вибору способу вирівнювання. Щоб вирівняти блок по центру коректно, слід застосовувати автовідступи для дочірніх блоків. Батьківські залишаємо без зміни.

Inline-блоки

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

 Текстовий блок 1
 Текстовий блок 2

Плюс inline-блоків у тому, що їхня ширина автоматично підлаштовується під вміст. Тому її вже не треба вказувати за допомогою властивості width. Якщо застосувати такий тип центрування CSS до кількох блоків, то вони будуть розташовані в рядок, але з різною висотою, якщо вміст відрізняється.

Flexbox

Flexbox — один із найзручніших способів вирівнювання практично для будь-якого типу контенту та блоків. Для горизонтального вирівнювання у Flexbox до батьківського блоку застосуйте властивість display:flex, щоб блок став flex-контейнером. Використовуйте justify-content: center, щоб вирівняти по горизонталі дочірні елементи.

 Текстовий блок 1
 Текстовий блок 2

У випадку з Flexbox ширина та висота блоків автоматично підлаштовуються під вміст. Якщо застосувати такий тип вирівнювання по центру до кількох блоків, то вони будуть вишиковуватися в одну лінію.

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

У прикладах вертикального вирівнювання CSS також використовуватимемо батьківські та дочірні блоки

з різних кольорів кордонів. Стилі будемо використовувати з блоку для горизонтального вирівнювання.

Властивості position та transform

Цей спосіб центрування по вертикалі – один з найскладніших. Прийде застосовувати багато властивостей, і важливо нічого не пропустити, інакше блок вирівнюється по одній зі своїх кордонів, а не по центру. Спочатку передайте батьківському блоку властивість position: relative і встановіть висоту 100 пікселів за допомогою height . Після цього до дочірнього блоку треба застосувати властивість position: absolute. Тепер можна виконати зрушення блоку відносного батьківського за допомогою властивостей top та position.

Flexbox

Для вертикального вирівнювання треба зробити батьківський блок flex-контейнером за допомогою властивості display:flex і вказати тип вирівнювання за допомогою властивості align-items.

Стати Frontend-розробником
та створюйте інтерфейси сервісів, якими користуються всі

Центрування

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

Властивості position та transform

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

Якщо спробувати вирівняти в такий спосіб кілька блоків, вони накладуться друг на друга.

 Текстовий блок 1
 Текстовий блок 2
 Текстовий блок 3

Flexbox

Для вирівнювання центром за допомогою Flexbox необхідно просто об'єднати вертикальне і горизонтальне вирівнювання.

 Текстовий блок 1
 Текстовий блок 2
 Текстовий блок 3

Grid

Вирівнювання за допомогою Grid-макету схоже на Flex. Цей спосіб зручний, тому що не потрібно знати заздалегідь розміри блоків і застосовувати до них багато властивостей. Спочатку зробіть батьківський блок grid-контейнер за допомогою властивості display: grid . Дочірнім елементам встановіть автоматичні відступи через margin: auto.

Якщо почати додавати нові дочірні блоки, то вони будуть розташовуватися стосами один під одним.

 Текстовий блок 1
 Текстовий блок 2
 Текстовий блок 3

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

left – по лівому краю;
right – По правому краю;
center – По центру;
justify – За шириною.

Розглянемо з прикладу чотири виду вирівнювання тексту, зберігши стилі з попередніх прикладів.

 Текстовий блок
 Текстовий блок right
 Текстовий блок
 CSS (англ. Cascading Style Sheets "каскадні таблиці стилів") - формальна мова декорування та опису зовнішнього вигляду документа (веб-сторінки), написаного з використанням мови розмітки (найчастіше HTML або XHTML). Також може застосовуватися до будь-яких XML-документів, наприклад SVG або XUL.

.left <text-align: left; >.right <text-align: right; >.center <text-align: center; >.justify

Значення left , right та center вирівнюють текст відповідно до своїх назв.При цьому вирівнюється лише текст щодо свого блоку. Самі блоки продовжують займати всю ширину батька. Значення justify використовується рідко через те, що він додає нерівномірні прогалини. Такий спосіб застосовують лише для верстки книг чи наукових праць.

Властивість text-align можна використовувати для вирівнювання тексту, блоків, заголовків, форм та списків. Наприклад, можна розташувати по центру заголовок.

Вирівнювання зображень

Якщо зображення обернено в контейнер, то до нього можна використовувати звичайні властивості вирівнювання. Тому навіть картинку на сторінці можна вирівняти за допомогою Flexbox чи text-align.

Flexbox

Для того, щоб вирівняти зображення за допомогою Flexbox, перетворите батьківський блок на flex-контейнер за допомогою властивості display: flex . Після цього додайте до нього властивості центрування.

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

Властивість text-align

До батьківського блоку можна застосовувати властивість text-align і встановити значення center . Так ви вирівняєте зображення та весь вміст блоку.

Властивості position та transform

Властивості position та transform також можна застосовувати до зображень. При цьому ми можемо вирівнювати лише зображення, не торкаючись інших елементів у батьківському блоці.

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

Підсумок

У CSS велика різноманітність підходів до вирівнювання елементів. Головна складність – вибрати відповідний під ваше завдання. Вирішуючи, який спосіб вирівнювання в CSS найзручніший, пам'ятайте:

Flexbox зручно використовувати практично для всіх типів вирівнювання та для будь-якого контенту;
властивість text-align дозволяє вирівнювати не тільки текст, як це може здатися з назви, а й форми, заголовки, списки, блоки та зображення;
сітку Grid зручно використовувати для центрування елементів усередині батьківського блоку.

Навчіться створювати зручні та ефектні сайти, сервіси та програми, які потрібні всім. Сьогодні професія на піку актуальності: у Росії 9000+ вакансій, де потрібне знання JavaScript.