Вирівнювання 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.

Сторінка: 1 2 3 4 5 6 7