CSS Layout - Horizontal & Vertical Align- выравнивание
Элементы центра
горизонтально и вертикально
Выравнивание элементов по центру
Чтобы по горизонтали центрировать элемент блока (например, <div>), используйте margin: auto;
Установка ширины элемента предотвратит его растяжение по краям контейнера.
Затем элемент будет занимать заданную ширину, а оставшееся пространство будет разделяться поровну между двумя полями:
Этот элемент div центрируется.
Пример
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Примечание: Выравнивание по центру не действует, если свойство width не задано (или установлено на 100%).
Выравнивание текста по центру
Чтобы просто центрировать текст внутри элемента, используйтеtext-align: center;
Этот текст центрируется.
Пример
.center {
text-align: center;
border: 3px solid green;
}
Совет: Дополнительные примеры выравнивания текста содержатся в разделе текст CSS.
Центрировать изображение
Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:
Пример
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Выравнивание по левому и правому краю-использование положения
Одним из способов выравнивания элементов является использование position: absolute; :
В моей младшей и более уязвимых лет мой отец дал мне несколько советов, которые я переворачивается в моей голове до сих пор.
Пример
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
Выравнивание по левому и правому краю-использование float
Другим методом выравнивания элементов является использование свойства float:
Пример
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Примечание: Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера. Вы можете использовать "clearfix" Хак, чтобы исправить это (см. пример ниже).
Clearfix Hack
Без Clearfix
С Clearfix
После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему:
Пример
.clearfix {
overflow: auto;
}
Центрировать вертикально-с помощью заполнения
Существует множество способов центрирования элемента по вертикали в CSS. Простое решение заключается в использовании верхнего и нижнего padding :
Я вертикально центрирован.
Пример
.center {
padding: 70px 0;
border: 3px solid
green;
}
Для центрирования как по вертикали, так и по горизонтали используйте padding и text-align: center:
Я вертикально и горизонтально центрирован.
Пример
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Центрировать вертикально-с помощью высоты линии
Еще одна хитрость заключается в использовании свойства line-height со значением, равным свойству height.
I am vertically and horizontally centered.
Пример
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Центрирование по вертикали-использование положения & Transform
Если padding и line-height не являются параметрами, третье решение заключается в использовании позиционирования и 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-преобразования.