САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Выравнивание



Центральный элемент
горизонтально и вертикально


Выравнить блок по центру

Выравнить блок <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;

Текст по центру.

Пример

.center {
   text-align: center;
   border: 3px solid green;
}
Редактор кода »

Совет: Дополнительные примеры о том, как выровнять текст, см. главу CSS Текст.


Выравнить изображение по центру

Установить изображение по центру, нужно использовать автоматические поля margin: auto; и установить видимость блока display: block;:

Paris

Пример

img {
   display: block;
   margin: auto;
   width: 40%;
}
Редактор кода »

Выравнить - используя позицию

Один из способов для выравнивания элементов является использование абсолютной позиции 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:

Вертикальное выравнивание по центру.

Пример

.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.

Вертикально и горизонтально по центру.

Пример

.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 преобразования.


Проверьте себя с помощью упражнений!