skip to main content

text-align

css

Кратко 🔗

text-align выравнивает текст по горизонтали внутри блока.

Если это свойство не задано, то текст выравнивается по левому краю.

Примеры 🔗

/* Ключевые значения */
text-align: left; /* Значение по умолчанию */
text-align: start;
text-align: right;
text-align: end;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Специальные значения для столбца в таблице */
text-align: ".";
text-align: "." center;

/* Выравнивание блока (нестандартный синтаксис) */
text-align: -moz-center;
text-align: -webkit-center;

/* Общие значения */
text-align: inherit;
text-align: initial;
text-align: unset;

Как пишется 🔗

У text-align есть четыре варианта значений:

  • center — выравнивание по центру. Подходит для заголовков.
  • justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
  • left — выравнивание по левому краю. Чаще используют именно его, потому что так удобнее читать текст. Также это значение является значением по умолчанию.
  • right — выравнивание по правому краю.

Не так давно появилось ещё два крайне удобных значения:

  • start — текст выровнен по тому краю, по которому принято в текущем языке.
  • end — текст выровнен по противоположному краю для текущего языка.

Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этому вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега html. Эти значения очень удобны, если вы разрабатывает мультиязычные сайты или приложения.

Подсказки 🔗

💡 Хочешь отцентровать блок, не меняя выравнивание внутри него? Добавь в левый и правый отступ margin значение auto: например, margin: auto;, margin: 0 auto;, margin-left: auto; margin-right: auto;.

💡 Значение свойства наследуется.

💡 Значение по умолчанию — left.

💡 Выравнивание текста нельзя анимировать при помощи transition ☹️

Ещё пример 🔗

Вот сразу три варианта выравнивания текста внутри контейнера <div>. В этом примере мы задаём выравнивание в CSS-стилях, привязывая их к классам .left, .right, .center, так что в HTML остаётся только добавить элементу атрибут класса с нужным именем, вроде class="left":

HTML

<div class="left">
<div class="content">Выравнивание по левому краю</div>
</div>
<div class="center">
<div class="content">Выравнивание по центру</div>
</div>
<div class="right">
<div class="content">Выравнивание по правому краю</div>
</div>

CSS

.left {
text-align: left;
}

.right {
text-align: right;
}

.center {
text-align: center;
}

div {
border: 1px solid;
padding: 15px;
}

.content {
width: 75%; /* Ширина вложенного контейнера */
}

В работе 🔗

Алёна,

🛠 Свойство text-align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных (inline-block) элементов внутри родителя.

С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.

Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:

HTML

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

CSS

.parent {
box-sizing: border-box;
width: 80%;
margin: 0 auto;
padding: 25px;
}

.child {
box-sizing: border-box;
display: inline-block; /* Меняем отображение на строчно-блочное */
width: 125px;
height: 125px;
padding: 25px;
text-align: center; /* Выравниваем текст внутри блоков */
font-size: 75px;
line-height: 75px;
font-weight: bold;
}

Добавим элементу .parent свойство text-align: center и элементы .child выровняются по центру родителя:

А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text-align: justify?

Ожидаемого поведения не получилось, и вот почему 👇

🛠 У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.

CSS

.parent:after {
content: "";
display: inline-block;
width: 100%;
}

Автор: Алёна,