Css вертикальне вирівнювання для всіх, css
Вирівнювання тексту по вертикалі в CSS - дуже непроста робота. Я бачив достатньо людей, які борються з цим, і постійно виявляю "критичні" помилки, коли справа доходить до реального адаптивного дизайну.
Поговоримо про властивості CSS vertical align
Коли я тільки починав працювати в області веб-розробки, то трохи помучився з цією властивістю. Я думав, що воно повинно працювати, як класичне властивість "text-align". Ах, якби все було так просто.
CSS властивість vertical-align відмінно працює з таблицями, але не з div або іншими елементами. Коли ви використовуєте його для div. то воно вирівнює елемент щодо інших блоків, але не його вміст. При цьому властивість працює тільки з display: inline-block; .
Ми хочемо центрировать контент, а не сам div!
У вас є два виходи. Якщо у вас тільки елементи div з текстом, то можна використовувати властивість line-height. Це означає, що потрібно знати висоту елемента, але не можна її встановлювати. Таким чином, ваш текст буде завжди в центрі.
Правда у цього підходу CSS вирівнювання по вертикалі є недолік. Якщо текст багатостроковий, тоді висота рядка буде помножена на кількість рядків. Швидше за все, в цьому випадку, у вас вийде жахливо зверстана сторінка.
Погляньте на цей приклад
Якщо контент, який ви хочете центрировать, складається більше, ніж з одного рядка, тоді краще використовувати табличні div. Також можна використовувати таблиці, але семантично це не правильно. Якщо вам потрібні розриви для адаптивних цілей, краще використовувати елементи div.
Щоб це працювало, повинен бути батьківський контейнер з display: table. а всередині нього - потрібну кількість стовпців, яке ви хочете центрировать за допомогою display: table-cell і vertical-align: middle.
Чому це працює з табличній розміткою, але не з елементами div. Тому що у рядків в таблиці однакова висота. Коли вміст комірки таблиці не використовує весь доступний простір по висоті, браузер автоматично додає вертикальні відступи, щоб центрувати вміст.
властивість position
Примітка: деякі властивості (top і z-index) працюють тільки в тому випадку, якщо для елемента задано значення position (НЕ static).
Давайте приступимо до справи!
Ви хочете здійснити CSS вирівнювання по центру по вертикалі. Спочатку створіть елемент з відносною позицією і розмірами. Наприклад: 100% по ширині і висоті.
Другий крок може бути різним у залежності від цільових браузерів, але можна використовувати один з двох варіантів:
- Старе властивість. потрібно знати точний розмір вікна, щоб видалити половину ширини і половину висоти. Подивіться приклад;
- Нове властивість CSS3. можна додати властивість transform зі значенням translate 50% і блок завжди буде в центрі. Подивитися приклад.
В принципі, якщо ви хочете центрировать контент, ніколи не використовуйте top: 40% або left: 300px. Це прекрасно працює на тестових екранах, але це не центрування.
Пам'ятайте position: fixed. Можна зробити з ним те ж саме, що і з абсолютною позицією, але вам не потрібна відносна позиція для батьківського елемента - вона завжди буде позиціонувати щодо вікна браузера.
Ви чули про специфікації flexbox?
Можна використовувати flexbox. Це набагато краще, ніж будь-який інший варіант вирівнювання тексту по центру CSS по вертикалі. З flexbox управління елементами нагадує дитячу гру. Проблема полягає в тому, що потрібно відкинути деякі браузери, такі як IE9 і версії нижче. Ось приклад того, як вертикально центрировать блок:
Використовуючи flexbox розташування, можна центрувати кілька блоків.
Якщо ви застосуєте те, що дізналися з цих прикладів, то зможете освоїти CSS вирівнювання блоку по вертикалі в найкоротші терміни.
Посилання та додаткова література
Вивчення CSS розмітки
Переклад статті "CSS Vertical Align for Everyone (Dummies Included)" був підготовлений дружною командою проекту Сайтобудування від А до Я.