CSS Макет - Выравнивание
Выравнивание
горизонтально и вертикально
Выравнивание блока
Для выравнивания блока <div> по горизонтали по центру, нужно установить поле автоматически margin: auto;
Что бы предотвратить его от растягивания по краям, нужно установить ширину 50 процентов width: 50%;.
Элемент примет позицую до указанной ширины, а остальное пространство будет разделено отступами по 10 пикселей со всех сторон padding: 10px;:
Блок по центру в горизонтали.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Попробуйте сами »
Примечание: Выравнивание по центру не будет имеет никакого эффекта, если CSS свойство width не установлено (или установлено на 100 писелей).
Выравнивание текста
Простое выравнивание текста по центру внутри элемента, используется CSS свойство со значением text-align: center;
Текст по центру.
.center {
text-align: center;
border: 3px solid green;
}
Попробуйте сами »
Совет: Дополнительные примеры о том, как выровнять текст, см. главу CSS Текст.
Выравнивание изображения
Установить изображение по центру, нужно использовать автоматические поля margin: auto; и установить видимость блока display: block;:
img {
display: block;
margin: auto;
width: 40%;
}
Попробуйте сами »
Выравнивание - используя 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
Затем мы можем добавить взлом clearfix к содержащему элементу, чтобы устранить эту проблему:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами »
Выравнивание - используя padding
Есть много способов в CSS, чтобы установить элемент по центру по вертикали. Простое решение состоит в использовании верхнего и нижнего отступов с помощью свойства padding:
Вертикальное выравнивание по центру.
.center {
padding: 70px 0;
border: 3px solid green;
}
Попробуйте сами »
Что бы выровнить по центру, как по вертикали, так и по горизонтали, нужно использовать CSS свойство padding и свойство со значением text-align: center:
Вертикально и горизонтально по центру.
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Попробуйте сами »
Выравнивание - используя line-height
Есть еще одна хитрость, заключается в использовании CSS свойства 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;
}
Попробуйте сами »
Выравнивание - используя transform
Если CSS свойство 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%);
}
Попробуйте сами »
Совет: Вы узнаете больше о трансформации собственности в главе 2D Трансформация.
Выравнивание - используя flex
Вы также можете использовать CSS свойство flex для центрирования объектов. Просто обратите внимание, что флексбокс не поддерживается в IE10 и более ранних версиях:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Попробуйте сами »
Совет: Вы узнаете больше о flex в главе CSS Флексбокс.