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: 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
не варианты, третье решение заключается в использовании позиционирования и свойства 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 не поддерживается в IE10 и более ранних версиях:
Пример
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
Попробуйте сами »
Совет: Вы узнаете больше про Flexbox в главе CSS Flexbox на нашем сайте W3Schools на русском.
