CSS Выравнивание
Выравнивание
горизонтально и вертикально
Выравнить блок по центру
Выравнить блок <div> по горизонтали по центру,
нужно установить поле автоматически margin: auto;
Что бы предотвратить его от растягивания по краям, нужно установить ширину 50 пикселей width: 50%;.
Элемент примет позицую до указанной ширины, а остальное пространство будет разделено отступами по 10 пикселей со всех сторон
padding: 10px;:
Блок по центру.
Пример
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Попробуйте сами »
Примечание: Выравнивание по центру не будет имеет никакого эффекта,
если свойство width не установлено (или установлено на 100 писелей).
Выравнить текст по центру
Простое выравнивание текста по центру внутри элемента,
используется свойство со значениемtext-align: center;
Текст по центру.
Совет: Дополнительные примеры о том, как выровнять текст, см. главу CSS Текст.
Выравнить изображение по центру
Установить изображение по центру, нужно использовать автоматические поля margin: auto;
и установить видимость блока display: block;:
Выравнить - используя позицию
Один из способов для выравнивания элементов является использование абсолютной позиции position: absolute;:
В мои молодые годы, мой отец дал мне совет, который раз, до сих пор, прокручивается в моей голове.
Пример
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Попробуйте сами »
Примечание: Абсолютно позиционированные элементы удаляются из нормального потока, и они могут перекрываться другими элементами.
Совет: При выравнивании элементов с помощью позиции position, всегда определяйте поле
margin и отступ padding для элемента <body>,
что позволяет избегать визуального различия в других браузерах.
Существует также проблема с IE8 и ранних версий, при использовании позиции position.
Если элемент в контейнере (в нашем случае <div class="container">)
имеет заданную ширину и отсутствует декларация !DOCTYPE.
IE8 и более ранние версии, добавят поле 17 пикселей с правой стороны, в месте которое предназначенно для прокрутки.
Всегда устанавливайте декларацию !DOCTYPE при использовании position:
Пример
body {
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
}
.right{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Попробуйте сами »
Выравнивание - используя поплавок
Другой метод для выравнивания элементов заключается с использованием свойства float :
Пример
.right{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Попробуйте сами »
Совет: При выравнивании поплавка float,
всегда определяйте поля margin и отступы padding
для тела документа <body>. Что позволит избежать визуального различия в разных браузерах.
Существует также проблема с IE8 и ранних версиях, при использовании поплавка float.
Если отсутствует декларация !DOCTYPE,
IE8 и более ранних версиях добавят поле 17 пикселей cправой стороны, в месте предназначенном для прокрутки.
Всегда устанавливайте декларацию !DOCTYPE при использовании поплавка float:
Пример
body{
margin: 0;
padding: 0;
}
.right{
float: right;
width: 300px;
background-color: #b0e0e6;
}
Попробуйте сами »
Выравнивание по центру - используя отступы
Есть много способов в CSS, чтобы установить элемент по центру по вертикали.
Простое решение состоит в использовании верхнего и нижнего отступов с помощью свойства padding:
Вертикальное выравнивание по центру.
Что бы выровнить по центру, как по вертикали, так и по горизонтали,
нужно использовать свойство отступ padding
и свойство со значением выравнивание по центру text-align: center:
Вертикально и горизонтально по центру.
Выравнивание по центру - используя высоту строк
Есть еще одна хитрость, заключается в использовании свойства высоты строк 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;
}
Попробуйте сами »
Выравнивание по центру - используя трансформацию
Если свойства 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 преобразования.