Руководство по выравниванию элементов в CSS

Текст внутри блочных элементов можно выровнять, правильно настроив выравнивание текста с помощью text-align.

h1 {
    text-align: center;
}
p {
    text-align: left;
}

Смотрите Руководство по форматированию текста в CSS, чтобы узнать больше о форматировании текста.

Выравнивание по центру с помощью auto margin

Выравнивание по центру блочного элемента является одним из наиболее важных следствий CSS-свойства margin. Например, контейнер <div> можно выровнять по центру по горизонтали, установив для левого и правого полей значение auto.

div {
    width: 50%;
    margin: 0 auto;
}

Правила в приведенном выше примере выравнивают элемент <div> по горизонтали по центру.

Выравнивание элементов с помощью свойства position

CSS-свойство position вместе со свойством left, right, top и bottom можно использовать для выравнивания элементов относительно области просмотра документа или содержащего родительский элемент.

.up {
    position: absolute;
    top: 0;
}
.down {
    position: absolute;
    bottom: 0;
}

Чтобы узнать больше о позиционировании элементов, см. Руководство по свойству position в CSS.

Выравнивание влево и вправо с помощью свойства float

CSS-свойство float может использоваться для выравнивания элемента слева или справа от содержащего его блока таким образом, чтобы другой контент мог обтекать его с другой стороны.

Следовательно, если элемент перемещается влево, содержимое будет обтекать вдоль его правой стороны. И наоборот, если элемент перемещается вправо, содержимое будет обтекать вдоль его левой стороны.

div {
    width: 200px;
    float: left;
}

Очистка (clear) плавающего элемента (float)

Одна из самых запутанных вещей в работе с разметкой на основе плавающего элемента — это сворачивающийся (collapsed) родительский элемент. Родительский элемент не растягивается автоматически для размещения плавающих элементов.

Тем не менее, это не всегда очевидно, если родительский элемент не содержит визуально заметного фона или границ, но важно помнить об этом, чтобы предотвратить странное поведение макета и кросс-браузерную проблему. Смотрите иллюстрацию ниже:

Как видите, элемент <div> не растягивается автоматически для размещения «плавающих» изображений. Эту проблему можно исправить, очистив float после плавающих элементов в контейнере, но перед закрывающим тегом элемента контейнера.

Есть несколько способов исправить эту проблему с коллапсом (collapsed) родительского CSS. Вот несколько решений вместе с живыми примерами.

Решение 1: Float для Container

Самый простой способ решить эту проблему — переместить содержащий родительский элемент.

.container {
    float: left;
    background: #f2f2f2;
}

Решение 2: Использование пустого Div

Это старомодный способ, но это простое решение, которое работает во всех браузерах.

.clearfix {
    clear: both;
}
/* html code snippet */
<div class="clearfix"> </div>

Вы также можете сделать это с помощью тега <br>. Но этот метод не рекомендуется, поскольку он добавляет не семантический код в вашу разметку.

Решение 3: Использование псевдоэлемента :after

Псевдоэлемент :after в сочетании со свойством content довольно широко используется для решения проблем очистки элементов float.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Класс .clearfix применяется к любому контейнеру с плавающими дочерними элементами.