6 Способів центрування елементів засобами css
Взагалі центрування HTML елементів на сторінці - це справа не складна. В деяких випадках. веб розробникам доводиться ламати голову, щоб знайти найкраще рішення.
Центрування елементів по горизонталі не так вже й складна, по вертикалі вже викликає питання, ну а комбінування взагалі може поставити в глухий кут. В еру адаптивного дизайну, нам рідко точно зрозумілі розміри тих чи інших елементів. Я нарахував 6 різних способів центрування елементів за допомогою CSS. Почнемо з простих прикладів, закінчимо більш складними. Працювати буде з одним і тим же HTML кодом:
Горизонтальне центрування за допомогою text-align
Часом, найпростіше рішення є найкращим:
Тут немає вертикальної центрування: для цього вам потрібно буде до div-у додати властивість margin-top і margin-bottom.
Центрування за допомогою margin: auto
Ще одне рішення для горизонтальної центрування:
Зауважте що для цього способу потрібно виставити властивість display: block.
Центрування за допомогою table-cell
Використовуючи display: table-cell, ми можемо забезпечити центрування елемента як по вертикалі, так і по горизонталі. Але тут нам знадобиться вкласти зображення ще в один елемент div.
Щоб все працювало коректно, div-у треба виставити width: 100%. Для центрування елемента по вертикалі, скористаємося стандартними прийомами, виставивши висоту. Працює всюди, включаючи IE8 +.
абсолютна центрування
Дуже цікаве рішення. Полягає в тому, що необхідно поставити висоту зовнішньому контейнеру:
Центруємо за допомогою translate
Нове рішення, де використовуються CSS трансформації. Забезпечує як горизонтальну центрування, так і вертикальну:
Є кілька мінусів:
- Властивість CSS transform вимагає використання браузерних префіксів
- Чи не працює в старих версіях IE (8 і нижче)
- Зовнішньому контейнеру потрібно задавати висоту.
- Якщо всередині контейнера є текст, то він може бути трохи розмитий.
Центрування за допомогою виду відображення flex
Напевно найпростіший варіант.
Працює не у всіх версіях IE (хоча можна підстрахувати себе, використовуючи додатково display: table-cell). Повний CSS:
Центрування за допомогою calc
У деяких випадках, даний спосіб більш універсальний ніж використання flexbox:
Все дуже просто, ми можемо вирахувати потрібні нам розміри в залежності від всього макета сторінки. Обчислення дуже прості, 50% це центральна точка контейнера, але наше завдання розмістити по цих координатах лівий верхній кут зображення. Далі відняти по половині висоти і ширини зображення. Формула наступна:
На практиці ви можете виявити, що даний метод працює відмінно, якщо нам відомі розміри елементів:
Даний метод підтримується Firefox-ом, починаючи з 4 версії, вам потрібно буде прописати браузерні префікси. В IE 8 не працює. Повний код:
Сподіваюся, даних методів вистачить, щоб ви знайшли для себе найкраще рішення.
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!