- Центрування рядків тексту
- Центрування текстового блоку чи зображення
- Центрування текстового блоку або зображення по вертикалі
Горизонтальне центрування text-align
Для центрування інлайнових елементів достатньо поставити батьківському елементу властивість text-align: center
See the Pen Centering Inline Elements by kravets (@raisa69) on CodePen.
Вертикальне центрування інлайнових елементів
Для вертикального вирівнювання інлайнових елементів використовується властивість vertical-align.
Властивость vertical-align має значення:
- top — вирівнювання по верхньому краю рядка;
- middle - по середині рядка;
- bottom — по нижньому краю рядка;
- baseline — за базовою лінєю рядка (значення за мовчанням).
На відміну від text-align властивість vertical-align задається самому елементу, а не його контейнеру
Адаптивне центрування по вертикалі
Відмінні результати для центрування по вертикалі елементів з висотою, що змінюється, можна отримати, об'єднавши vertical-align: middle з псевдоелементами.
Приклад із блоком усередині контейнера, який має змінну висоту. Головний прийом у створенні невидимого елементу (використовуючи псевдоелемент), який заповнюватиме контейнер по висоті, і встановити властивості display: inline-block і vertical-align: middle . Після цього потрібно вирівняти внутрішній блок, також встановивши властивості display: inline-block і vertical-align: center.
Потім центрувати блок горизонтально, використовуючи text-align: center:
See the Pen centering vertical-align: middle by kravets (@raisa69) on CodePen.
Коли змінюється ширина контейнера, також змінюється ширина дочірнього блоку у відсотках відповідно змінюючи його висоту. Але при цьому до блоку застосовується вертикальне вирівнювання CSS div.
Центрування блокового елемента
Блоковий елемент можна центрувати, вказавши для margin-left і margin-right значення auto (а також прописавши для нього конкретний width, інакше він займе всю ширину батьківського контейнера і не потребуватиме центрування).
Спосіб працює незалежно від ширини центрованого блокового елемента та його батька.See the Pen Centering Single Block Level Element by kravets (@raisa69) on CodePen.
Центрування декількох блоків
Якщо блоки розміщені горизонтально методом inline-block, то для центрування таких блоків можна застосувати властивість text-align, яка працює лише в inline-елементах.
Значення inline-block дозволяє відобразити внутрішній div як inline-елемент , а також як блок ( inline-block ). Властивість text-align у зовнішньому div-елементі дозволить центрувати внутрішній div.
See the Pen Centering Row of Blocks by kravets (@raisa69) on CodePen.
У тому ж випадку, якщо є кілька блокових елементів розміщених один над одним, цілком спрацює прийом з автоматичними відступами:See the Pen Centering Blocks on Top of Each Other by kravets (@raisa69) on CodePen.
Горизотальне і вертикальне центрування блоку
Щоб вирівняти div по центру, знову використовується margin: auto та абсолютне позиціонування зовнішнього div. Метод працюватиме у всіх сучасних браузерах
See the Pen Centering a div in a page, horizontally and vertically by kravets (@raisa69) on CodePen.
Центрування тексту та гіперпосилань (рядкових елементів)
Іноді малі/текстові елементи можуть виглядати відцентрованими по вертикалі тільки тому, що у них однакові верхні та нижні поля (padding).
See the Pen
Centering text (kinda) with Padding by kravets (@raisa69)
on CodePen.
See the Pen
Centering a line with line-height by kravets (@raisa69)
on CodePen.
Центрування дочірнього блоку якщо відома висота елементу
See the Pen Center Block with Fixed Height by kravets (@raisa69) on CodePen.
Центрування дочірнього блоку, якщо невідома висота елементу
See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.
Способи центрування зображень
Найбільш простий спосіб - це присвоїти малюнку клас, а потім, за допомогою CSS зробити картинку блоком, після чого задати їй автоматичне вирівнювання з правої та лівої частини.See the Pen Выравнивание изображений по центру by kravets (@raisa69) on CodePen.
Другий спосіб, вирівнювання зображення - це поміщення картинки в параграф, якому ми надамо клас. Після цього, поставити параграфу вирівнювання тексту по центру.
See the Pen Выравнивание изображений способ 2 by kravets (@raisa69) on CodePen.
Третій спосіб заснований на семантичних тегах HTML5 і його рекомендується використовувати, якщо є можливість (і необхідність) загорнути картинку в тег figure.See the Pen figure выравниваем по центру by kravets (@raisa69) on CodePen.
Рекомендоване відео для перегляду: