CSS Layout — Horizontal & Vertical Align- выравнивание
Установка ширины элемента предотвратит его растяжение по краям контейнера.
Затем элемент будет занимать заданную ширину, а оставшееся пространство будет разделяться поровну между двумя полями:
Этот элемент div центрируется.
Пример
Примечание: Выравнивание по центру не действует, если свойство width не задано (или установлено на 100%).
Выравнивание текста по центру
Чтобы просто центрировать текст внутри элемента, используйте text-align: center;
Этот текст центрируется.
Пример
Совет: Дополнительные примеры выравнивания текста содержатся в разделе текст CSS.
Центрировать изображение
Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:
Пример
Выравнивание по левому и правому краю-использование положения
Одним из способов выравнивания элементов является использование position: absolute; :
В моей младшей и более уязвимых лет мой отец дал мне несколько советов, которые я переворачивается в моей голове до сих пор.
Пример
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
Выравнивание по левому и правому краю-использование float
Другим методом выравнивания элементов является использование свойства float :
Пример
Примечание: Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера. Вы можете использовать «clearfix» Хак, чтобы исправить это (см. пример ниже).
Clearfix Hack
Без Clearfix
С Clearfix
После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему:
Пример
Центрировать вертикально-с помощью заполнения
Существует множество способов центрирования элемента по вертикали в CSS. Простое решение заключается в использовании верхнего и нижнего padding :
Я вертикально центрирован.
Пример
Для центрирования как по вертикали, так и по горизонтали используйте padding и text-align: center :
Я вертикально и горизонтально центрирован.
Пример
Центрировать вертикально-с помощью высоты линии
Еще одна хитрость заключается в использовании свойства line-height со значением, равным свойству height .
I am vertically and horizontally centered.
Пример
.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>
/* If the text has multiple lines, add the following: */
.center p <
line-height: 1.5;
display: inline-block;
vertical-align: middle;
>
Центрирование по вертикали-использование положения & 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-преобразования.
Выравнивание текста в CSS: свойство text-align
В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:
| Как необходимо выровнять текст? | Подходящее значение |
|---|---|
| По левому краю | left |
| По правому краю | right |
| По центру страницы/блока | center |
| По ширине страницы/блока | justify |
| Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю) | start |
| Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю) | end |
Пример записи стиля:
Рекомендации по использованию стилей
На скриншотах показаны примеры использования различных значений для свойства CSS text-align:
Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left. 
Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right. 
Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо. 
Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией). 
Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.
Выравнивание текста и блоков
Свойство text-align производит горизонтальное выравнивание текста внутри элемента. При этом сам элемент не перемещается.
text-align: left — по левому краю (значение по умолчанию)
text-align: right — по правому краю
text-align: center — по центру элемента
text-align: justify — по ширине
К текстовым элементам можно применять свойство vertical-align . Но оно производит вертикальное выравнивание не относительно внешнего элемента, а относительно его базовой линии. Поэтому для выравнивания текста это свойство использовать не удобно.
Ячейки таблицы
Свойства text-align и vertical-align можно использовать для выравнивания внутри ячеек таблицы. Для ячеек vertical-align принимает такие значения:
vertical-align: middle — по центру (значение по умолчанию)
vertical-align: top — по верхнему краю
vertical-align: bottom — по нижнему краю
Это свойство производит вертикальное выравнивание всего содержимого ячейки, включая текстовые и блочные элементы. А text-align применяется только к тексту. Пример:
Блоки
Есть ещё один способ выравнивания блоков. Можно указать размер блока и внешние отступы в процентах от внешнего элемента. Это можно использовать для горизонтального и вертикального выравнивания. Только при вертикальном выравнивании высота внешнего блока должна быть задана напрямую. Нужно учитывать что размер экрана может быть маленьким, поэтому дополнительно можно указать минимальный размер блока.
Если какому-то отступу установить значение auto , то отступ займёт всё доступное пространство. Это позволяет расположить блок справа. А если это значение указать левому и правому отступу, то пространство делится между ними пополам, и блок оказывается в центре.
Выравнивание заголовков HTML
Заголовки имеют важную роль при создание Web – страниц , они выделяют разделы к котором они относятся , сообщая о важности раздела .
Выравнять заголовок можно с помощью атрибута: text-align .
Значение атрибута text-align
- center – Выравнивание заголовка по центру .
- left – Выравнивание по заголовка левому краю .
- right – Выравнивание заголовка по правому краю .
Выравнивание заголовков HTML
Выравнивание заголовков
Выравнивание заголовков