Выравнивание по центру в CSS
Горизонтальное выравнивание текста
Самый распространённый и самый лёгкий тип выравнивания— это выравнивание текста с помощью свойства ‘text-align’.
1 |
p {text-align: center} |
Горизонтальное выравнивание блока или изображения
Иногда выравнивать горизонтально нужно не текст, а изображение или блок. Для этого нужно установить поля блока ‘margin’ на ‘auto’. Но при этом сам блок должен иметь фиксированную ширину.
1 2 3 4 |
.block { margin: 0 auto; width: 10rem; } |
1 2 3 |
<div> <div class="block">Горизонтальное выравнивание изображений или блока</div> </div> |
Этот способ можно использовать для центрирования изображения:
1 2 3 4 |
img { display:block; margin:0 auto; } |
1 2 3 |
<div> <img src="/image.png" alt="Image" /> </div> |
Вертикальное выравнивание
Для того чтобы выравнять вертикально блок в CSS2 нет такого свойства, но это можно сделать указав для внешнего блока свойство ‘display’ в виде ячейки таблицы ‘table-cell’, так как содержимое ячейки таблицы уже можно выравнять по вертикали.
1 2 3 4 5 |
.container { min-height: 10rem; display: table-cell; vertical-align: middle; } |
1 2 3 |
<div class="container"> <p>Вертикальное выравнивание</p> </div> |
Выравнивание по вертикали в CSS3
В CSS3 это можно сделать с помощью свойства ‘transform’.
1 2 3 4 5 6 7 8 9 10 |
.container { height: 10rem; position: relative; } .container p { margin: 0; position: absolute; top: 50%; transform: translate(0, -50%); } |
1 2 3 |
<div class="container"> <p>Выравнивание по вертикали в CSS3</p> </div> |
Основные принципы:
- контейнер должен быть относительно позиционированным (position: relative);
- элемент внутри контейнера имеет абсолютное позиционирование (position: absolute);
- поместите элемент посередине контейнера с помощью ‘top: 50%’;
- используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты.
Есть еще один способ это сделать с помощью свойства ‘display’ и его значения ‘flex’.
1 2 3 4 5 |
.container { height: 10rem; display: flex; align-items: center; } |
1 2 3 |
.container p { margin: 0; } |
Вертикальное и горизонтальное выравнивание в CSS3
Способ с абсолютным позиционированием:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.container { height: 10rem; position: relative; } .container p { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } |
1 2 3 |
<div class="container"> <p>CSS3</p> </div> |
Способ с помощью flex:
1 2 3 4 5 6 7 8 9 10 |
.container { height: 10em; display: flex; align-items: center; justify-content: center; } .container p { margin: 0; } |