Веб-дизайнери щодня використовують DIV у роботі. Без применшень, це найпопулярніший тег. Відкрийте джерело будь-якого сайту, і ви побачите, що велика частина, якщо не дві третини об’єктів укладені в <div>. Навіть з приходом HTML5 і появою серйозних конкурентів у вигляді article або header, його продовжують повсюдно вставляти в розмітку. Тому пропоную вам розібратися з питанням форматування та вирівнювання блоків div по центру.
Що таке DIV
Назва елемента походить від англійського слова division, що в перекладі означає розподіл. При написанні розмітки його використовують для того, щоб розбити елементи на блоки. У DIV укладають групи контенту на веб-сторінці. Наприклад, зображення, абзаци з текстом. Тег ніяк не впливає на відображення вмісту і не несе ніякої семантичного навантаження.
DIV підтримує всі глобальні атрибути. Але для веб-дизайну вам знадобляться тільки два – це class і id. Про всіх інших ви будете згадувати лише в екзотичних випадках, і то не факт. Атрибут align, який раніше використовували, щоб вирівняти div по центру або по лівому краю, вважається застарілим.
Коли використовувати DIV
Уявіть собі, що сайт — це холодильник, а DIV — це пластикові контейнери, з яким треба розсортувати вміст. Ви ж не будете класти фрукти в одну ємність з ліверної ковбасою. Кожен вид продукту ви покладете окремо. Аналогічним чином формується веб-контент.
Відкрийте будь-який сайт поділіть його на смислові блоки. Вгорі шапка, внизу футер, в центрі основний текст. Збоку зазвичай знаходиться колонка поменше з рекламним контентом або хмаринкою тегів.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
</style>
</head>
<body>
<div class=”site-header”></div>
<div class=”main-content”></div>
<div class=”aside-column”></div>
<div class=”site-footer”></div>
</body>
</html>
Тепер розберіть кожну секцію детальніше. Почніть з header. У шапки сайту є окремо логотип, навігація, заголовок першого рівня, іноді слоган. Кожного змістового блоку призначте свій контейнер. Так ви не тільки розділіть елементи в потоці, але і зробите легше їх форматування. Вам буде набагато простіше вирівняти об’єкт в тегу DIV по центру, призначивши йому клас або ідентифікатор.
Вирівнювання DIV по центру за допомогою полів
При обробці веб-елементів браузер враховує три властивості: padding, marging та border. Відступи padding – це простір між контентом і його кордоном. Margin — поля, що відокремлюють один об’єкт від іншого. Border — це лінії вздовж блоків. Вони можуть бути призначені відразу зі всіх або тільки з одного боку:
div{
border: 1px solid #333;
border-left: none;
}
Ці властивості додають вільний простір між об’єктами, а також допомагають вирівнювати їх і розміщувати потрібним чином. Наприклад, якщо блок з картинкою потрібно змістити від лівого краю до центру на 20%, ви привласнюєте елементу margin-left зі значенням 20%:
.block-with-img{
margin-left: 20%;
}
Також елементи можна форматувати використовуючи значення ширини та негативні відступи. Наприклад, є блок з розмірами 200px на 200px. Спочатку призначимо йому абсолютне позиціонування і змістимо його до центру на 50%.
div{
position: absolute;
left: 50%;
}
Тепер, щоб DIV по центру був розташований ідеально, задаємо йому негативний відступ вліво, рівний 50% його ширини, тобто -100 пікселів:
margin-left: -100px;
В CSS такий спосіб називають «видалення повітря». Але у нього є істотний недолік у необхідності проводити постійні розрахунки, що досить складно зробити для елементів з кількома рівнями вкладеності. Якщо задані значення padding та border-width, браузер за умовчанням вирахує розміри контейнера як суму товщини кордонів, відступу праворуч, ліворуч і самого контенту всередині, що теж може стати несподіванкою.
Тому, коли треба вирівняти DIV по центру, використовуйте властивість box-sizing зі значенням border-box. Воно не дасть браузеру додавати значення відступів і меж загальній ширині елемента DIV. Щоб підняти або опустити елемент, також застосовуйте негативні значення. Але призначити в такому разі їх можна або верхнім, або нижнім краєм контейнера.
Як вирівняти DIV блок по центру за допомогою автоматичних полів
Це простий спосіб центрувати великі блоки. Ви просто призначаєте ширину контейнера і властивість margin зі значенням auto. Браузер розмістить блок посередині з однаковими полями ліворуч і праворуч, виконавши всю роботу самостійно. В результаті, ви не ризикуєте заплутатися в математичних розрахунках і істотно економите свій час.
div{
width: 90%;
margin: 0 auto;
}
Використовуйте метод з автоматичними полями при розробці адаптивних додатків. Головне – призначати контейнера значення ширини em або відсотках. Код з прикладу вище розташує DIV по центру і на будь-яких пристроях, включаючи мобільні телефони, він буде займати 90% екрана.
Вирівнювання через властивість display: inline-block
За промовчанням елементи DIV вважаються блоковими, і значення display у них варто block. Для цього методу вам потрібно буде змінити цю властивість. Підходить тільки для DIV з батьківським контейнером:
<div class=”outer-div”>
<div class=”inner-div”>
Будь-який текст
</div>
</div>
Елементу з класом outer-div призначається властивість text-align зі значенням center, яке має в своєму розпорядженні текст всередині по центру. Але поки браузер бачить вкладений DIV як блочний об’єкт. Щоб властивість text-align спрацювало, inner-div повинен сприйматися як рядковий. Тому в таблиці CSS для селектора inner-div ви пишете наступний код:
.inner-div{
display: inline-block;
}
Ви змінюєте властивість display з block на inline-block.
Метод transform/translate
Каскадні таблиці стилів дають можливість за бажанням переміщати, скошувати, обертати і всіляко трансформувати веб-елементи. Для цього використовується властивість transform. В якості значень вказується бажаний тип перетворення і ступінь. У даному прикладі ми будемо працювати з translate:
transform: translate(50%, 50%);
Функція translate переміщує елемент його поточної позиції вліво/вправо, вгору/вниз. В дужках передаються два значення:
- ступінь переміщення по горизонталі;
- ступінь переміщення по вертикалі.
Якщо елемент потрібно пересунути тільки по одній з осей координат, тоді ви вказуєте після слова translate ім’я осі і в дужках величину необхідного зсуву:
transform: translateY(-20%);
В деяких підручниках можна зустріти transform з вендорными префіксами:
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
У 2018 році цього робити не потрібно, властивість підтримується всіма браузерами, включаючи Edge і IE.
Для того щоб змістити потрібний нам DIV по центру, CSS-функція translate записується зі значенням 50% для вертикальної і горизонтальній осі. Завдяки цьому, браузер змістить елемент з його поточної позиції наполовину від його ширини і висоти. Властивості width і height повинні бути обов’язково зазначені:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
.nav-bar{
display: block;
width: 90%;
height: 100vh;
margin: 0 auto;
background: linear-gradient(to left, red, #f06d06);
}
.navigation{
width: 50%;
height: 50%;
color: #FFF;
border: 1px dashed #F5F2F2;
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class=”site-header”>
<div class=”logo”></div>
<div class=”nav-bar”>
<div class=”navigation”>
Goes Here some text
</div>
</div>
</div>
<div class=”main-content”></div>
<div class=”aside-column”></div>
<div class=”site-footer”></div>
</body>
</html>
Враховуйте, що елемент, до якого застосовується властивість transform рухається в незалежності від оточуючих його об’єктів. З одного боку, це зручно, але іноді зсуваючись, DIV може перекрити собою інший контейнер. Тому такий спосіб центрувати веб-компоненти вважається нестандартним і застосовують його тільки в випадках крайньої необхідності. Трансформації за всіма канонами CSS використовують для анімації.
Робота з Flexbox-версткою
Flexbox вважається складним способом верстки веб-макетів. Але якщо ви освоїте, то зрозумієте, що вона набагато простіше і приємніше, ніж стандартне способи форматування. Специфікація Flexbox — це гнучкий і неймовірно потужний спосіб обробки елементів. З англійської мови назва модуля так і перекладається, як «гнучкий контейнер». Значення ширини, висоти, розташування елементів настроюються автоматично, без обчислення відступів і полів.
У попередніх прикладах ми вже працювали з властивістю display, але ставили йому блочне (block) і рядкове (inline-block) значення. Для створення flex-макетів ми будемо використовувати display: flex. Спочатку нам знадобитися flex-контейнер:
<body>
<div class=”flex-container”></div>
</body>
Щоб перетворити його в флекс-контейнер в каскадних таблицях, ми пишемо:
.flex-container{
display: flex;
}
Всі вкладені в нього об’єкти, але тільки прямі нащадки будуть flex-елементами:
<body>
<div class=”flex-container”>
<div class=”flex-element”>Перший</div>
<div class=”flex-element”>Другий</div>
<div class=”flex-element”>Третій</div>
<div class=”flex-element”>Четвертий</div>
</div>
</body>
Якщо всередину flex-контейнера помістити список, то пункти списку li не вважаються flex-елементами. Flexbox-верстка буде діяти тільки на ul:
<div class=”flex-container”>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Правила розміщення flex-елементів
Щоб керувати flex-елементами, потрібні justify-content та align-items. Залежно від зазначених значень, ці дві властивості розміщують об’єкти належним чином автоматично. Якщо нам потрібно вирівняти всі вкладені DIV по центру, ми записуємо justify-content: center ” align-items: center і більше нічого. Всю іншу роботу браузер виконає сам:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
.flex-container{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class=”flex-container”>
<div class=”flex-element”>Перший</div>
<div class=”flex-element”>Другий</div>
<div class=”flex-element”>Третій</div>
<div class=”flex-element”>Четвертий</div>
</div>
</body>
</html>
Щоб вирівняти текст по центру DIV, які є flex-елементами, можна використовувати стандартний прийом text-align. Або ви можете кожен вкладений DIV також зробити flex-контейнерів і керувати вмістом за допомогою justify-content. Такий спосіб набагато раціональніше, якщо всередині міститься різноманітний контент, включаючи графіку, інші вкладені об’єкти, включаючи багаторівневі списки.
