6 хитрощі CSS для вирівнювання вмісту по вертикалі

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

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

1. Використовуйте абсолютне позиціонування

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

, один - контейнер, інший - дочірній елемент, який містить вміст.

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

Щоб вирівняти його вертикально, перемістіть положення дочірнього елемента зверху, на половину висоти контейнера, і витягніть його на половину ширини дитячого елемента. Ось вихід:

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

2. Використовуйте CSS3 Transform

CSS3 Transform полегшив розміщення вмісту в центрі. CSS3 Transform, на відміну від позиції властивість, не вплине на положення інших елементів в межах одного контейнера.

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

Майте на увазі, що CSS3 Transforms не буде працювати в Internet Explorer 8 і нижче. Ви можете використовувати будь-який з інших методів тут як резервний.

3. Використовуйте Заповнення

Ми також можемо використовувати прокладка створити ілюзію вертикального вирівнювання. Для цього просто встановіть верхню та нижню частину доріжки так:

Цей трюк підходить, коли ви не встановите контейнер фіксованою шириною, просто встановіть ширину авто.

4. Використовуйте висоту лінії

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

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

5. Використовуйте таблицю CSS

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

6. Використовуйте Flexbox

Останнім методом вертикального центрування є використання Flexbox. Flexbox - новий модуль у CSS3. Він пропонує більш простий спосіб вирівнювання вмісту. Для центрування вмісту вертикально у флекс-коробці просто додайте align-items: центр; наступним чином, і все.

Майте на увазі, що деякі браузери Flexbox підтримують лише часткові функції модуля Flexbox, наприклад Internet Explorer 10, Safari, 6 і Chrome 27 і нижче. Таким чином, подібно до трюку з CSS3 Transform, переконайтеся, що ефект добре потрапляє в цей браузер.