Посібник для початківців за блочною моделлю CSS
Блокова модель/Box Model CSS — фундаментальна концепція, яка дозволяє розміщувати та вирівнювати елементи на веб-сторінці.
У цьому посібнику ми розповімо про все, що вам потрібно знати про блочну модель CSS, включаючи:
До кінця статті ви добре розумітимете, що таке блочна модель і як використовувати її можливості для створення складних і чуйних макетів веб-сторінок.
Що таке блочна модель CSS
Блокова модель CSS представляє кожен елемент на веб-сторінці у вигляді прямокутного блоку.
- Контент/Content: Вміст всередині елемента, наприклад текст, зображення тощо.
- Відступ/Padding: Прозорий простір навколо вмісту
- Кордон/Border: Область, що оточує відступи (якщо вони є) та контент
- Поле/Margin: Прозорий простір навколо кордону
Ось діаграма блокової моделі:
Діаграма блокової моделі CSS
Розуміння цих компонентів дозволяє точно керувати інтервалами, позиціонуванням та вирівнюванням HTML-елементів на сторінці.
Тепер давайте розглянемо кожен компонент докладніше.
Властивості блокової моделі
Контент/Content
Внутрішня частина поля, заповнена вмістом, таким як текст, зображення тощо. Це область всередині padding , border і margin .
Щоб задати висоту та ширину області контенту, використовуйте властивості height та width .
.box
height: 300px;
width: 300px;
>
Відступ/Padding
Прозора область, що оточує контент. Відступ створює простір між контентом та кордоном (border).
За допомогою властивості padding можна встановити відступи по всіх чотирьох сторонах елемента. Наприклад, щоб додати 50px відступу з усіх боків:
Ви також можете вибрати певну сторону, наприклад, padding-top, padding-right, padding-bottom і padding-left. Або використовуючи логічні властивості padding - padding-block є скороченням для CSS властивостей padding-block-start і padding-block-end і padding-inline є скороченням для CSS властивостей padding-inline-start і padding-inline-end .
Відступ збільшує загальну ширину та висоту блоку. Якщо ви задали ширину та висоту, то відступи будуть додані до цих розмірів.
Кордон/Border
Кордон оточує відступ та контент. Вона визначає край елемента.
Межі мають властивості border-width, border-style (solid, dotted і т.д.) та border-color.
.box
border: 5px solid blue;
>
Це створить суцільну синю межу шириною 5px навколо контенту та підкладки.
Кордони також збільшують загальну ширину та висоту елемента.
Поле/Margin
Прозорий зовнішній простір, що оточує елемент. Поля створюють простір між блоками та допомагають розділити елементи.
Поле очищає область навколо кордону. Ми можемо виділити певну сторону, як і у випадку з padding, використовуючи margin-top, margin-right, margin-bottom і margin-left. Або використовуючи логічні властивості margin - margin-block є скороченням для CSS властивостей margin-block-start і margin-block-end, і margin-inline є скороченням для CSS властивостей margin-inline-start і margin-inline-end.
Або встановіть поля відразу з усіх боків:
Поля схлопуються по вертикалі, тобто використовується більше полі між елементами, що дозволяє уникнути подвійних полів.
Тепер, коли ми розглянули кожен компонент окремо, обговоримо важливу концепцію, що впливає на блокову модель.
Розміри блоку
За умовчанням CSS ширина і висота, задані для елемента, застосовуються тільки до області контенту.
Тому поверх цих розмірів додаються відступи, межі та поля.
Це означає, що якщо ви задасте ширину 300px , то загальна ширина блоку дорівнюватиме:
300px контент + 25px відступ ліворуч + 25px відступ праворуч + 2px кордон ліворуч + 2px межа праворуч = 354px загальна ширина.
Цей стандартний box-sizing називається content-box .
Однак, ви можете змінити цю поведінку, встановивши box-sizing: border-box . У цьому випадку ширина та висота будуть застосовуватися до межі поля, що включає контент, padding та border .
Тепер загальна ширина завжди дорівнюватиме 300px, незалежно від значень padding і border. Область контенту зменшується, компенсуючи це.
Це значно полегшує управління розмірами.
Тому в більшості випадків ви захочете встановити:
*, *::before, *::after
box-sizing: border-box;
>
Це задає розмір border-box для всіх елементів та псевдоелементів.
Властивість display
Властивість display керує тим, як елемент відображається на сторінці. Воно дуже впливає на роботу блокової моделі та макет сторінки.
Два найбільш поширені значення:
- block. Відображає елемент у вигляді блоку, який перериває потік та розташовується вертикально. За замовчуванням ширина дорівнює 100% батьківського елемента.
- inline. Відображає елемент у рядку з текстом, без перенесення рядків до або після. Типова ширина відповідає розміру вмісту.
Найчастіше ви використовуєте display: block для div і display: inline для span.
Але display також дозволяє використовувати більш складні макети, такі як flexbox і grid.
block vs inline
Оскільки властивість display важлива, давайте докладніше розглянемо, як поводяться блок і inline блоки.
block
- Розривають потік і розташовуються вертикально
- За замовчуванням 100% ширини батька
- Можна задати ширину та висоту
- Враховують padding, border та margin з усіх боків
Список елементів, що є блоковими за замовчуванням.
Inline
- Горизонтальний розподіл вмісту
- Враховують тільки ліві та праві padding та margin
- Неможливо задати ширину та висоту
- padding та margin не впливають на вертикальний відступ
До інлайн елементів відносяться елементи, що не розривають потік, такі як , , , , і т.д.
Знання того, чи є елемент блоковим чи інлайн, допомагає пояснити розстановку та поведінку макета.
Висота та ширина
Властивості width і height керують розміром області контенту.
Пікселі
Пікселі забезпечують точний контроль. Але піксельні розміри не реагують на зміну розміру сторінки.
Відсотки
Відсотки є чуйними та масштабуються щодо розміру батьківського елемента.
auto
auto встановлює ширину автоматично залежно від розміру вмісту.
max-width/min-width
max-width: 500px;
min-width: 250px;
Задає максимальне або мінімальне значення ширини, що чуйно масштабується.
vh/vw
width: 50vw;
height: 50vh;
Одиниці області перегляду масштабуються за розміром області перегляду (розмір вікна браузера) – відсоток від ширини області перегляду.
Це дозволяє використовувати повністю чуйні щодо області перегляду блоки.
Тепер, коли ми розглянули основні поняття, погляньмо кілька прикладів блокової моделі в дії!
Приклади дизайну блочної моделі
Маючи уявлення про компоненти блокової моделі, ви можете точно розташувати та вирівняти елементи.
Ось кілька поширених варіантів використання та приклади макетів.
Двохколоночний макет
Простий двоколонковий макет з лівим сайдбаром та правою областю контенту:
.container
display: flex;
>
.sidebar
flex: 1;
margin-right: 20px;
>
.content
flex: 2;
>
Використовуючи flex-box, ви розділите контейнер у співвідношенні 1 до 2, сайдбар та колонка контенту. Поля поділяють елементи.
Чуйний центрований блок
Для вирівнювання блоку по горизонталі та чуйності:
.center-box
margin: 0 auto;
max-width: 500px;
>
Автоматичні ліве та праве поля центрують блок. max-width забезпечує чуйність боксу.
Фіксований сайдбар, гнучкий контент
Для створення сайдбара з фіксованою шириною та розширюваною областю контенту:
.container
display: flex;
>
.sidebar
width: 200px;
>
.content
flex: 1;
min-width: 500px;
>
Ширина сайдбара фіксована і становить 200px. Контент заповнює простір, що залишився з min-width: 500px .
Макет картки
Макет карток з рівними полями:
.card
display: inline-block;
width: 300px;
margin: 20px;
border: 1px solid #eee;
>
display: inline-block дозволяє відображати картки горизонтально. Ширина та поля керують інтервалом та розмірами.
Вертикальне центрування
Для вертикального центрування тексту або елементів:
.center
height: 100vh;
display: flex;
align-items: center;
>
Висота 100vh розтягує блок на весь екран. flex-box вирівнює елементи по вертикалі за допомогою align-items.
Можна навести ще безліч прикладів, але ці повинні підштовхнути вас до ідей створення макетів і дизайнів з використанням властивостей блокової моделі CSS!
Висновок
Ми розглянули основи блочної моделі CSS від полів, кордонів, відступів до контенту. З цими знаннями ви можете розпочати створення точних, чуйних макетів сторінок.
- Блокова модель включає контент, відступи, межі і поля.
- Використовуйте box-sizing: border-box для зручнішого визначення розміру.
- display контролює поведінку block vs inline
- Ширина, висота, відступи, поля та межі можуть бути задані окремо
- max/min width/height допомагають створювати чуйні блоки
Для подальшого вивчення вивчіть шаблони чуйного дизайну та просунуті методи верстки, такі як CSS flex-box та grid.
Блокова модель є основою освоєння CSS. З її допомогою ви зможете оживити дизайн та макети в Інтернеті!
Горизонтальне та вертикальне вирівнювання блоків CSS. Все про CSS вирівнювання
Властивість CSS vertical-align відповідає за вертикальне вирівнювання тексту, картинок на сторінці. Важливою особливістю є те, що він працює тільки з елементами таблиці, inline та inline-block елементами. Підтримується сучасними браузерами. Синтаксис CSS vertical-align
- baseline – вирівнювання по базовій лінії предка (або просто нижня межа батька)
- bottom - вирівнювання по нижній частині рядка (або елемента, що розташовується нижче за всіх)
- middle - вирівнювання середньої точки елемента за базовою лінією батька плюс половина висоти батьківського елемента
- sub - відображення відбувається під рядком (виглядає як підрядковий індекс)
- super - відображення над рядком (як верхній індекс)
- text-bottom - вирівнювання нижньої межі елемента по нижньому краю рядка
- text-top - вирівнювання верхньої межі елемента по верхньому краю рядка
- top - вирівнювання верхнього краю елемента по верху найвищого елемента рядка
- inherit - успадковує значення батька
- значення - вказується в пікселях Позитивне число зміщує вгору щодо базової лінії.
- відсотки - вказується в процетах. Позитивне число зміщує вгору щодо базової лінії.
Значення vertical-align за замовчуванням:
- baseline (для малих елементів)
- middle (для осередків таблиці)
Вертикальне вирівнювання у таблицях
Найчастіше vertical-align використовується у осередках таблиць.
Синтаксис CSS valign для таблиць
Де value може приймати такі значення:
- baseline - вирівнювання по базовій лінії першого текстового рядка
- bottom - вирівнювання по нижньому краю осередку таблиці
- middle - вирівнювання посередині комірки
- top - вирівнювання верхнього краю комірки
| Вирівнювання по верху |
| Вирівнювання посередині |
| Вирівнювання внизу |
Приклади з вертикальними вирівнюваннями
Приклад 1. Значення vertical-align: baseline, bottom, top, sub
Приклад 2. Значення vertical-align: абсолютні значення та відсотки
Нижче наведено приклади вертикального вирівнювання з абсолютним значенням та відсотками.
.vert_align_abs_plus < display : inline-block ; block ;vertical-align : 50% ; #aaa ;
Перетворюється на сторінку на наступне:
Вихідний рядок. Текст із вирівнюванням на 10 пікселів вгору
Вихідний рядок.Текст із вирівнюванням на 5 пікселів вниз
Вихідний рядок. Текст із вирівнюванням на 50% нагору
Вихідний рядок. Текст із вирівнюванням на 30% вниз
Значення vertical-align: middle не вирівнює рядковий елемент по центру найбільшого елемента в рядку (що можна було б очікувати). Натомість значення middle вирівнює елемент щодо гіпотетичної малої літери "X" (також званої x-висотою).
Для звернення до vertical-align із JavaScript потрібно писати таку конструкцію:
Сьогоднішня стаття спрямована на те, щоб показати, як за допомогою кількох CSS-трюків вирівняти div центром, як по горизонталі, так і по вертикалі. Також ми розповімо, як провести центрування по всій сторінці або в окремому div-елементі.
Просте центрування DIV-елемента на сторінці
Цей спосіб буде добре працювати у всіх браузерах.
CSS
Значення auto як margin встановлює лівий і правий відступ на весь простір, доступний на сторінці. Тут важливо запам'ятати, що у div-елемента, що центрується, обов'язково має бути встановлено значення width .
Центруємо DIV усередині DIV-елемента старим способом
Цей метод div вирівнювання по центру працюватиме у всіх браузерах.
CSS
HTML
Зовнішній div може бути поміщений як завгодно, але у внутрішнього блоку div обов'язково має бути вказана ширина (width).
Центруємо DIV усередині DIV-елемента за допомогою inline-block
У цьому методі центрування div усередині div необов'язково вказувати ширину внутрішнього елемента. Він буде працювати у всіх сучасних браузерах, включаючи IE8.
CSS
HTML
Властивість text-align працює лише в inline-елементах. Значення inline-block дозволяє відобразити внутрішній div як inline-елемент , а також як блок ( inline-block ).Властивість text-align у зовнішньому div-елементі дозволить нам центрувати внутрішній div.
Центруємо DIV усередині DIV-елемента горизонтально та вертикально
Тут для центрування div центром сторінки використовується margin: auto . Приклад працюватиме у всіх сучасних браузерах.
CSS
HTML
У внутрішнього div-елемента повинна бути вказана ширина (width) та висота (height). Метод не спрацює, якщо зовнішній div-елемент має фіксовану висоту.
Центруємо DIV по нижній межі сторінки
Тут для розташування div центром по вертикалі використовується margin: auto і абсолютне позиціонування для зовнішнього елемента. Метод працюватиме у всіх сучасних браузерах.
CSS
HTML
У внутрішнього div має бути встановлена ширина. Простір унизу сторінки регулюється за допомогою властивості bottom зовнішнього div. Ви також можете центрувати div по верхній межі сторінки, замінивши властивість bottom на top .
Центруємо DIV на сторінці вертикально та горизонтально
Тут, щоб вирівняти div центром, знову використовується margin: auto і абсолютне позиціонування зовнішнього div . Метод працюватиме у всіх сучасних браузерах.
CSS
У div-елемента повинна бути встановлена ширина (width) і висота (height).
Робимо адаптивне центрування DIV-елемента на сторінці
Тут для вирівнювання div по центру засобами CSS ми робимо ширину div-елемента адаптивною, щоб вона реагувала зміни розмірів вікна. Цей метод працює у всіх браузерах.
CSS
У центрованого div-елемента має бути встановлена властивість max-width.
Центруємо DIV всередині елемента за допомогою властивостей внутрішнього блоку
Внутрішній div-елемент тут адаптивний. Цей метод розташування div всередині div по центру працюватиме у всіх браузерах.
CSS
HTML
У внутрішнього div має бути встановлена властивість max-width.
Центруємо два адаптивні div-елементи поруч один з одним
Тут у нас два розташовані поруч адаптивні div-елементи. Цей метод встановлення div по центру екрану буде працювати у всіх сучасних браузерах.
CSS
HTML
Тут у нас кілька елементів із застосованою властивістю inline-block, розташованих усередині центрованого контейнера. У цьому прикладі також використовуються медіа-запити CSS; тобто, якщо розмір екрану менше 600 пікселів, то властивість max-width як лівого, так правого div-елемента встановлюється на 100%.
DIV-елемент, центрований за допомогою Flexbox
Тут ми маємо CSS div по центру за допомогою Flexbox. Він призначений для того, щоб полегшити процес розробки дизайну інтерфейсів користувача. Цей модуль підтримується Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ та Android Browser 40+.
CSS
У CSS деякі на перший погляд прості речі виявляється не так просто виконати. Однією з таких речей є вирівнювання, тобто. коли один елемент необхідно розташувати певним чином відносного іншого.
У цій статті наведено деякі готові рішення, які допоможуть спростити роботу з центрування елементів по горизонталі та (або) по вертикалі.
Примітка: під кожним рішенням наведено список браузерів із зазначенням версій, у яких зазначений CSS-код працює.
CSS - Вирівнювання блоку по центру
1. Вирівнювання одного блоку по центру іншого. При цьому перший та другий блок мають динамічні розміри.
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Вирівнювання одного блоку по центру іншого. При цьому другий блок має фіксовані розміри.
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Вирівнювання одного блоку по центру іншого. У цьому другий блок має розміри, задані у відсотках.
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по горизонталі
1. Вирівнювання одного блокового елемента (display: block) щодо іншого (в якому він розташований) по горизонталі:
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Вирівнювання рядкового (display: inline) або рядково-блочного (display: inline-block) елемента по горизонталі:
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по вертикалі
1. Відцентрувати один елемент (display: inline, display: inline-block) щодо іншого (у якому він розташований) по центру. Батьківський блок у цьому прикладі має фіксовану висоту, яка задається за допомогою властивості CSS line-height.
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрування одного блоку щодо іншого по вертикалі у вигляді батьки як таблиці, а дитини як осередки цієї таблиці.
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Якщо Ви знаєте якісь інші цікаві хитрощі або корисні готові рішення щодо вирівнювання, поділіться ними в коментарях.
Від автора: Знову вітаю вас на сторінках нашого блогу.У сьогоднішній статті я хотів би розповісти про різні прийоми вирівнювання, яке можна застосовувати як до блоків, так і до їхнього вмісту. Зокрема, як вирівняти блоки в CSS, а також про вирівнювання тексту.
Вирівнювання блоків по центру
У css легко вирівняти блок по центру. Це найвідоміший для багатьох прийом, але про нього я хотів би розповісти саме зараз, насамперед. Тут мається на увазі вирівнювання центром по горизонталі щодо батьківського елемента. Як воно здійснюється? Допустимо, у нас є контейнер і в ньому наш піддослідний:
Припустимо, що це шапка сайту. Вона не тягнеться на всю ширину вікна і нам треба відцентрувати її. Пишемо так:
width/max-width: 800px;
Нам потрібно вказати точну чи максимальну ширину, після чого записати ключову властивість margin: 0 auto. Воно задає зовнішні відступи нашій шапці, перше значення визначає відступи зверху та знизу, а друге – праворуч та ліворуч. Значення auto дає команду браузеру автоматично розрахувати відступи з обох боків так, щоб елемент був по центру батьківського. Зручно!
Вирівнювання тексту
Це також дуже простий прийом. Для вирівнювання всіх малих елементів можна використовувати властивість text-align та її значення: left, right, center. Останнє центрує текст, що нам потрібно. Так само можна вирівняти навіть картинку, тому що вона теж за умовчанням є малим елементом.
Вирівнювання тексту по вертикалі
А ось це вже складніше. За замовчуванням немає такої простої загальновідомої властивості, яка легко центрувала б текст у блоковому контейнері по вертикалі. Проте є кілька прийомів, які за роки роботи вигадали верстальники.
Встановіть висоту блоку за допомогою внутрішніх відступів.Спосіб полягає в тому, щоб не задавати явну висоту за допомогою height, а створити її штучно за допомогою paddingів зверху та знизу, які мають бути однакові. Створимо будь-який блок та запишемо йому такі властивості:
Фон просто для того, щоб візуально бачити краї, а також внутрішні відступи. Тепер висоту блоку складають два ці відступи і сам рядок, а виглядає все це так:
Визначити для блоку line-height. Мені здається, це правильніший спосіб, якщо вам треба вирівняти один рядок тексту. При ньому ви можете записати висоту по нормальному, за допомогою свійсва height. Після цього йому потрібно задати висоту рядка, таку ж, як і висота блоку в цілому.
line-height: 60px;
Результат буде аналогічний вищенаведеній картинці. Все буде працювати, навіть якщо ви додасте внутрішні відступи. Однак тільки для одного рядка. Якщо вам потрібно більше тексту в елементі, цей спосіб працювати не буде.
Перетворити блок на комірку таблиці. Суть цього у тому, що з осередку таблиці діє властивість vertical-align: middle, яке центрує елемент по вертикалі. Відповідно, у цьому випадку блоку потрібно задати таке:
display: table-cell;
vertical-align: middle;
Цей спосіб хороший тим, що ви зможете вирівняти скільки завгодно текст по центру. Але блоку, в який вкладено наш div краще прописати display:table, інакше може не працювати.
Ну ось ми і підійшли до останнього на сьогодні прийому – це вирівнювання блоків по вертикалі. Потрібно сказати, що тут знову ж таки немає властивості, яка призначалася б спеціально для цього, але є кілька прийомів, про які ви повинні знати.
Задати відступи у відсотках.Якщо ви знаєте висоту батьківського елемента і поміщаєте в нього ще один блоковий елемент, то можна відцентрувати його за допомогою відсоткових відступів. Наприклад, батько має висоту 600 пікселів. Ви поміщаєте блок, який має висоту 300 пікселів. Скільки вам потрібно відступити зверху та знизу, щоб відцентрувати його? По 150 пікселів, а це 25% від висоти батька.
Цей спосіб дозволяє зробити центрування тільки коли розміри дозволяють зробити обчислення. А якщо у вас батько 887 пікселів заввишки, то точно записати нічого не вийде, це й так зрозуміло.
Вставити елемент у комірку таблиці. Знову ж таки, якщо ми перетворимо батьківський елемент на комірку таблиці, то вставлений у нього блок автоматично відцентрується по вертикалі. Для цього батьку лише потрібно задати vertical-align: middle.
А якщо ще до цього записати ще й margin: 0 auto, то елемент і по горизонталі стане в центр!
Вирівнювання різних елементів, як на сайті або сторінці, спочатку йде для когось складним завданням, що хитається вирівнювання тексту по вертикалі. Як не дивно, одним із найскладніших способів використання CSS є центрування контенту. Центрування контенту по горизонталі відносно легко у певні моменти часу. Центрування вмісту по вертикалі утруднено майже завжди. Центрування різного елемента, що потрібно виставити по вертикалі за допомогою CSS. Це дуже часто ставиться питання, яке створює проблеми дизайнерів і веб майстрам. Тим не менш, існує безліч методів для виконання центрування по вертикалі, і кожен з них досить простий у використанні.
Якщо ви коли-небудь пробували, це складно, особливо якщо ви хочете уникнути використання таблиць.На щастя, наші крики про допомогу були почуті, і одне з нових озброєнь, доданих до арсеналу CSS для вирішення цієї проблеми, це тип макета, відомий як гнучкий макет коробки. Як ви дізнаєтеся за кілька миттєвостей, які надає вам деякі дійсно відмінні функції, щоб спростити складні макети. Частина цієї відмінної функціональності також дозволяє центрувати ваш контент вертикально і горизонтально, і ось що ми розглянемо в цьому уроці. Ви можете зробити це з доповненням певною мірою, але це може вивести ваш макет на більш дрібні екрани. Додавання класу CSS до таблиці стилів означає, що ви можете вертикально центрувати будь-який контент за лічені секунди.
Горизонтальне вирівнювання визначає, як лівий та правий краї абзацу збігаються між лівим та правим краями текстового поля. Вертикальне вирівнювання визначає розміщення знака у текстовому полі по вертикалі. Відсутність хороших способів вертикального центрування елементів CSS було темним недоліком його репутації значною мірою для її існування.
Перший метод з line-height
Перший спосіб йде простий і в чомусь банальний, де є свої недоліки, що буде йти обмеження в застосуванні. При кодуванні html сторінок для сайту міжрядковий інтервал текстового вмісту, ймовірно, є одним із атрибутів, який зазвичай залишається за умовчанням. Взагалі нам потрібно задати висоту самого рядка, що йде з аналогічною висотою для блоку, де використовується line-height
властивість.
Це перший метод, що показаний на демонстрації
Constutesim_first <
border: 2px solid #bf1515;
height: 175px;
>
.constutesim_first > p <
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
>
Також ви можете відразу подивитися, як все насправді виглядатиме.
Аналогічним методом є можливість реалізувати, як виставити зображення, що буде по центру і безумовно по вертикалі. Тут залишається лише прописати одну властивість vertical-align: middle; яке відповідає за виведення картинки.
Second-variation <
border: 2px solid red;
line-height:158px;
>
Second-variation div <
text-align:center;
>
.second-variation img <
vertical-align: middle;
border: 0px solid #3a3838;
>
Реалізуємо знімки зображень по центру та вертикалі.
Вирівнювання з властивістю position
Це ймовірно найвідоміший метод, але найбільш поширений по застосуванню до використання за допомогою CSS. Але тут потрібно додати, що він також не ідеальний і у цього методу, також є свої невеликі нюанси, які пов'язані з центром елемента, що якщо задаватиметься у відсотковому співвідношення, то стане центрування ліворуч верхньої сторони, всередину самого блогу.
Competaird-option <
border: 2px solid #d40e0e;
height: 162px;
position: relative;
>
.competaird-option div <
position: absolute;
top: 50%;
left: 50%;
height: 28%;
width: 49%;
margin: -2% 0 0 -25%;
border: 2px solid #4a4848;
>
Інтервали між рядками або лінією заввишки є вертикальною висотою між рядками тексту в тонованому HTML сторінці. У більшості випадків це значення відстані встановлюється відповідним значенням браузером або механізмом рендерингу. Це значення зазвичай залежить від шрифту відображуваної сторінки та інших факторів.
Вирівнювання із властивістю table
У цьому методі задіємо перевірену і стару методу, де переробимо елементи в таблицю, в якій знаходяться комірки.Що за тегом, під назвою table, то тут він не буде задіяний, тут задаватимемо зовсім інші властивості CSS, це display: table;, display: table-cell;. Якщо говорити про найстаріші версії IE, дані тут просто виводити не буде. Сподіваюся ви свій браузер оновили, тому що він стає неактуальним і майже все не коректно виводить.
Cherevert-variation <
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
>
Cherevert-variation div <
display: table-cell;
vertical-align: middle;
text-align:center;
>
Насамперед, давайте подивимося, що використовується за умовчанням, яке використовується більшістю браузерів. У більшості сучасних денних браузерів інтервал між лініями.
Вирівнювання із властивістю flex
Тут ми підходимо, до більш оригінального варіанту, який має свої властивості, що можна рідко зустріти верстки інтернет ресурсу. Але все ж таки вони застосовуються, що в якихось випадках вони корисні. Це встановлює основну вісь, таким чином, визначення елементів гнучкості напрямку міститься в контейнері гнучких дисків.
Variant-horizontal <
border: 2px solid #d20c0c;
height: 147px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #49518c;
>
Ви можете вказати значення для рядка-висоти так само, як ви вказали б будь-який інший розмір css, або як число, розмір пікселя, або як відсоток.
Вирівнювання з властивістю transform
І ось підійшли в крайньому методі, але не до останнього по застосуванню в використання його веб дизайні. Тут все просто, потрібно зрушити по вертикалі заданий елемент на значення, яке вам потрібно. Властивість transform , це список перетворень, які інсталятор застосовує під час інсталяції пакета. Установник застосовує перетворення у тому порядку, як вони зазначені у властивості.
Vertical-medilpasudsa <
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
>
.vertical-medilpasudsa > div <
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
>
Коли ви вкажете значення у вигляді числа, він ґрунтуватиметься на поточному розмірі шрифту як базу. Поточний розмір шрифту збільшується на число, яке ви вказуєте для обчислення висоти лінії або пробілу між рядками.
Якщо ви хочете центрувати знаки по горизонталі елемента, ви повинні використовувати text-align: center. Один із варіантів, якщо ви хочете центрувати його по вертикалі, і у вас є фіксований верхній нижній колонтитул і один ряд тексту, встановіть, що висота лінії буде такою ж, як висота нижнього колонтитулу.
Якщо вам потрібно центрувати текст усередині елемента, такого як div, header або paragraph, ви можете використати властивість text-align CSS.
Text-align має кілька допустимих властивостей:
Center: Текстура центрована;
left: Вирівнюватиметься з лівого боку контейнера;
right: Вирівняно з правого боку контейнера
justify: Вимушений дорівнювати, як з лівої, так і з правого краю контейнера, за винятком крайніх рядків;
justify-all: Примушує останній рядок виправдовувати знаки;
start: Те ж саме, що ліворуч, тільки якщо напрямок йде зліва на правий бік. Але правильно буде, якщо спочатку задати напрямок текстового напряму, що станеться праворуч наліво;
End: Протилежність початку;
match-parent: Аналогічно успадкування, крім початку та кінця, обчислюється щодо батьківського елемента;
Використовуйте ці властивості для вирівнювання тексту всередині батьківського або обгорткового div. Якщо ви хочете центрувати текст по горизонталі елемента, ви повинні використовувати text-align: center.
Один з варіантів, якщо ви хочете центрувати його по вертикалі, якщо у вас є фіксований верхній нижній колонтитул і один ряд тексту, встановіть, що висота лінії буде такою самою, як висота нижнього колонтитулу.
Повний посібник з Flexbox вирівнюванню
Вирівнювання, ймовірно, найзаплутаніший аспект flexbox. Модуль макета flexbox має кілька властивостей вирівнювання, які поводяться по-різному за різних обставин, і при їх використанні ви не завжди можете зрозуміти, що відбувається чи чому. Однак, якщо ви знаєте, на що звернути увагу, вирівнювання не є таким складним, як здається на перший погляд. Цей посібник допоможе вам повністю розібратися у Flexbox вирівнюванні.
Вирівнювання, ймовірно, найзаплутаніший аспект flexbox. Модуль макета flexbox має кілька властивостей вирівнювання, які поводяться по-різному за різних обставин, і при їх використанні ви не завжди можете зрозуміти, що відбувається чи чому. Однак, якщо ви знаєте, на що звернути увагу, вирівнювання не є таким складним, як здається на перший погляд. Цей посібник допоможе вам повністю розібратися у Flexbox вирівнюванні.
Історія про дві осі
При використанні flexbox ми працюємо з двома осями: основний і поперечної. Як показують їх імена, ці осі утворюють ієрархічне співвідношення, в якому основна вісь вище за поперечну.
Поперечна вісь завжди перпендикулярна до основної осі.
Це ієрархічне співвідношення є основною відмінністю між flexbox і CSS Grid Layout. За структурою CSS grid має дві неієрархічні осі: вісь рядків і вісь стовпців. . З іншого боку, Flexbox має одну основну та одну вторинну вісь, оскільки є одномірною моделлю макета Найкласніше в flexbox це те, що ви можете визначити напрямок цього одного виміру, встановивши напрямок головної осі, тому ви можете створювати обидва варіанти, макети на основі рядків і макети на основі стовпців.
Щоб уникнути плутанини у властивостях вирівнювання, завжди майте на увазі, що коли ви використовуєте flexbox, ви працюєте з одновимірною моделлю. тільки в одному напрямку, вздовж головної осі. Ви можете розподілити flex елементи по головній осі та вирівняти відстань між окремими елементами поперечної осі.
Почнемо з встановлення основної осі
Напрямок основної осі визначається властивістю flex-direction - існує чотири можливі значення:
- flex-direction: row - основна вісь йде зліва направо (це значення за замовчуванням)
- flex-direction: row-reverse; - основна вісь йде справа наліво
- flex-direction: column; - основна вісь йде зверху вниз
- flex-direction: column-reverse; – основна вісь йде знизу нагору
Давайте подивимося, як це виглядає у браузері. Я використовую дуже просту HTML-розмітку, всього дев'ять елементів, розташованих один над одним
Зовнішній div з класом .container буде flex контейнером, а внутрішні div-ви з класом .item будуть flex елементами.
1. Зліва направо: row
Як згадувалося, у flex напрям за замовчуванням - row ; якщо ви нічого не встановили, це і буде використовується значення. Як ви можете бачити нижче, я додала властивості, що стосуються flexbox, тільки flex контейнер. Flex елементи отримали кілька властивостей для прикраси:
Коли flex-direction встановлено як row, основна вісь йде горизонтально, зліва направо. Отже, це і є напрямок, вздовж якого розташовані flex елементи. Поперечна вісь проходить перпендикулярно, зверху вниз і коли елементи досягають краю контейнера, вони перебудовуються в цьому напрямку.
2. Зліва направо: row-reverse
Коли flex-direction присвоюється значення row-reverse, положення осей залишається незмінним, що означає, що основна вісь проходитиме горизонтально, а поперечна вісь вертикально. Однак, напрямок рядків буде змінено на протилежне: праворуч наліво вздовж основної осі.
flex-direction:
row-reverse;
Якщо ви подивитеся на нумерацію flex елементів, ви побачите, що тепер кожен рядок пронумеровано праворуч наліво, але елементи все ще переходять вертикально вниз.
Якщо ви хочете змінити напрямок поперечної осі, вам потрібно використовувати значення wrap-reverse для властивості flex-wrap . Подивіться на відмінності:
3. Зверху донизу: column
Коли flex-direction встановлено як column , основна та поперечна осі змінюють свої позиції. Основна вісь проходитиме вертикально (згори донизу), а поперечна вісь йтиме горизонтально (зліва направо).
flex-direction:
column;
max-height:
35rem;
/* so that items wrap */
Тепер ви побачите, що нумерація елементів flex йде не в рядок, а в стовпець. Тут одновимірна природа flexbox, мабуть, найбільш помітна. Елементи будуть перебудовуватись лише в тому випадку, якщо контейнеру задана фіксована висота.
4.Знизу догори: column-reverse
Сподіваюся ви подивіться наступний приклад. Коли flex-direction встановлено як column-reverse , основна вісь залишається вертикальною, а поперечна вісь, як і раніше, горизонтальною, як ми бачили в попередньому прикладі. Проте напрям стовпця змінюється на протилежне, тому основна вісь йде знизу вгору.
flex-direction:
column-reverse;
max-height:
35rem;
/* so that items wrap */
Як ви можете бачити нижче, нумерація елементів flex починається в нижньому лівому кутку, переміщаючись вгору і вправо.
Знову ж таки, щоб змінити напрямок поперечної осі, вам потрібно використовувати wrap-reverse для властивості flex-wrap .
Скорочення flex-flow
Властивість flex-flow є скороченням для flex-direction та flex-wrap. Наприклад, ви можете використовувати:
flex-flow:
column
wrap;
flex-direction:
column;
Властивості вирівнювання Flexbox
Вирівнювання у Flexbox може бути як по основній, так і по поперечній осі.
Одне з властивостей (justify-content) належить головній осі, а решта трьох (align-items, align-self, align-content) відносяться до поперечної осі.
Як і слід очікувати, поведінка властивостей вирівнювання залежить від якості flex-direction. Наприклад, justify-content вирівнює елементи горизонтально, якщо flex-direction встановлено як row або row-revers , а також вертикально, якщо flex-direction встановлено як column або column-revers . Це справжня краса гнучкого контейнер.
Вирівнювання вздовж основної осі
Властивість justify-content вирівнює flex елементи всередині flex контейнера вздовж основної осі. Воно розподіляє простір, що залишився після того, як браузер обчислив необхідний простір для всіх елементів в контейнері flex. Властивість justify-content може набувати п'яти значень:
- flex-start - flex елементи розташовані на початку основної осі (це значення за замовчуванням)
- flex-end – flex елементи розташовані в кінці основної осі
- center - flex елементи розташовані в центрі основної осі
- space-between - flex елементи рівномірно розподілені вздовж основної осі, від flex-start до flex-end
- space-around - flex елементи рівномірно розподілені вздовж основної осі, але половинного відступи розміру додаються з кожного кінця
Щоб правильно використовувати властивість justify-content, вам потрібно звернути увагу на напрямок ваших осей. Наприклад, правило justify-content: flex-start; завжди має в своєму розпорядженні flex елементи на початку основної осі. Зліва, коли flex-direction встановлено як row , справа - коли встановлено як row-revers , зверху - коли встановлено як column і знизу - коли встановлено як column-revers .
Наступна codepen демонстрація показує, як різні значення властивості justify-content вирівнюють flex елементи, коли властивість flex-direction встановлено як row .
Вирівнювання вздовж поперечної осі
Час перейти до наступного рівня. Ви можете використовувати три властивості CSS для вирівнювання елементів уздовж поперечної осі Два з них (align-items і align-self) призначені для однорядкового вирівнювання, а align-content для вирівнювання по багаторядковій лінії.
Однорядкове вирівнювання
Елементи align-items і align-self визначають, як простір розподіляється між елементами flex вздовж поперечної осі. Насправді, обидва роблять те саме, але в той час, як align-items вирівнюють всі елементи всередині flex контейнера, align-self перевизначає вирівнювання за умовчанням для окремих flex елементів.
Обидва можуть приймати такі значення:
- auto - змушує властивість align-self успадковувати значення align-items (за замовчуванням для align-self)
- flex-start – flex елементи вирівняні від початку поперечної осі
- flex-end – flex елементи вирівняні від кінця поперечної осі
- center - flex елементи вирівняні по центру поперечної осі
- baseline - flex елементи вирівняні від їхньої базової лінії вгору
- stretch - flex елементи розтягнуті вздовж поперечної осі так, щоб заповнити flex контейнер (за замовчуванням для align-items)
Codepen нижче показує, як властивості align-items і align-self ведуть себе коли flex-direction встановлено як row . Поперечна вісь за промовчанням проходить зверху вниз. Ви можете побачити, що значення flex-start вирівнює елементи від початку поперечної осі, тоді як flex-end вирівнює їх від кінця.
Природно, коли flex-direction - column або column-revers, ви працюватимете з макетом на основі стовпців, властивості align-items і align-self будуть вирівнювати елементи по горизонталі.
Багаторядкове вирівнювання
Властивість align-content робить можливим багаторядкове вирівнювання вздовж поперечної осі. Воно визначає, як рядки flex елементів відступають один від одного. значень:
- flex-start – flex елементи вирівняні від початку поперечної лінії
- flex-end – flex елементи вирівняні від кінця поперечної осі
- center - flex елементи вирівняні по центру поперечної осі
- space-between - flex елементи розподілені рівномірно вздовж поперечної осі між flex-start та flex-end
- space-around - flex елементи розподілені рівномірно вздовж поперечної осі, але половинного відступи розміру додаються з кожного кінця
- stretch - flex елементи розтягнуті вздовж поперечної осі так, щоб заповнити flex контейнер (це значення за замовчуванням)
Нижче ви можете побачити різні демонстрації в codepen, що показують, як працюють різні значення якості align-content . Як і у випадку з нашими іншими демонстраціями, застосовано напрямок осі за умовчанням.
Ці перші два приклади немає однорядкового властивості ( align-items ), тому ви помітите, що це елементи розтягуються за умовчанням. У такому прикладі ми встановимо align-items: flex-start; так, що елементи будуть вирівнюватися у напрямку початку поперечної осі, а align-content: flex-end; ми встановимо так, що вміст буде вирівняно до кінця осі:
Якщо ви зрозуміли все, що ми до цього пройшли, ви дуже добре попрацювали. Тепер у вас є хороше базове розуміння flexbox вирівнювання.
Висновок
Ми закінчили! Нагадаю: найголовніше, що необхідно пам'ятати, це те, що вам потрібно враховувати напрямки основної та поперечної осей. Завжди починайте вирівнювання з установки властивості flex-direction. Щоб дізнатися більше про flexbox вирівнювання та застосувати свої знання на практиці, ви можете переглянути такі ресурси:
- Офіційна документація W3C з flexbox вирівнювання Важке, але корисне чтиво; також документація з flexbox.
- Як вирівняти елементи у контейнері Flex. Сторінка документів MDN з інтерактивними демонстраційними прикладами та прикладами коду.
- Пам'ятка Flexbox від Joni Trythall. Хороша PDF-шпаргалка для завантаження, з виноградом, грушами та апельсинами.
- Flexbox Froggy Онлайн-гра для вивчення flexbox, з жабами та ліліями. Якщо ви хочете вибирати flexbox вирівнювання інтуїтивно, спробуйте цю гру (ви можете спробувати все, що ми розглянули в цьому уроці).
