CSS Макет - Горизонтальне & Вертикальне вирівнювання
Центрування елементів
по горизонталі та вертикалі
Вирівняти елементи по центру
Для горизонтального центрування елемента блока (наприклад, <div>), використовуйте margin: auto;
Встановлення ширини елемента дозволить запобігти його витягуванню до країв контейнера.
Потім елемент займе вказану ширину, а залишений простір буде розділено порівну між двома полями:
Цей елемент div відцентрований.
Приклад
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Спробуйте самі »
Примітка: Вирівнювання по центру не діє, якщо властивість width не встановлено
(або встановлено на 100%).
Вирівняти текст по центру
Щоб просто відцентрувати текст всередині елемента, використовуйте text-align: center;
Цей текст відцентрований.
Порада: Додаткові приклади вирівнювання текста дивіться в розділі CSS Текст.
Центрувати зображення
Щоб центрувати зображення, встановіть для лівого і правого поля значення auto і додайте його в елемент block:
Вирівнювання по лівому і правому краю - використання position
Одним зі способів вирівнювання елементів є використання position: absolute;:
Коли я ще був школярем, казала мені мати - вчи англійську! А я не слухав матір... Був дурним!.. Тепер все треба вчити заново!
Приклад
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Спробуйте самі »
Примітка: Абсолютно позиціоновані елементи видаляються із нормального потоку і можуть перекривати інші елементи.
Вирівнювання по лівому і правому краю - використання float
Інший метод вирівнювання елементів - використовувати властивість float:
Приклад
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Спробуйте самі »
Примітка: Якщо елемент вище, ніж елемент, що його містить, і він є плаваючим, він буде виходити за межі свого контейнера. Ви можете використовувати хак clearfix, щоб виправити це (див. приклад нижче).
Хак clearfix
Без Clearfix
Із Clearfix
Потім ми можемо додати overflow: auto; до елементу, що його містить, щоб вирішити цю проблему:
Вертикальне центрування - використання padding
Існує багато способів відцентрувати елемент по вертикалі в CSS. Просте рішення - використовувати верхній та нижній padding:
Я вертикально відцентрований.
Щоб центрувати як вертикально, так і горизонтально, використовуйте padding та text-align: center:
Я вертикально і горизонтально відцентрований.
Центрувати по вертикалі, використовуючи висоту рядка - line-height
Інший спосіб - використовувати властивість line-height зі значенням, рівним властивості height.
Я вертикально і горизонтально відцентрований.
Приклад
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* Якщо текст складається із кількох рядків, додайте наступне: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Спробуйте самі »
Вертикальне центрування - використання position & transform
Якщо padding та line-height не варіанти, третє рішення полягає у використанні position і властивості transform:
Я вертикально і горизонтально відцентрований.
Приклад
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Спробуйте самі »
Порада: Ви дізнаєтесь більше про властивості transform в розділі 2D Трансформації.
Центрування по вертикалі - використання Flexbox
Ви також можете використовувати flexbox для центрування. Зверніть увагу, що flexbox не підтримується в Internet Explorer 10 і більш ранніх версіях:
Приклад
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
Спробуйте самі »
Порада: Ви дізнаєтесь більше про Flexbox в розділі CSS Flexbox на нашому сайті W3Schools українською.
