Свойство text-align

Свойство text-align в CSS используется для выравнивания внутреннего содержимого блочного элемента.

div {
  text-align: center;
}

Значения text-align

Сначала традиционные значения для выравнивания текста в CSS:

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

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

В CSS3 также есть два новых значения: start и end. Они упрощают поддержку нескольких языков. Хотя в большинстве языков письмо идет слева направо (ltr), но, например, в  арабском языке письмо идет справа налево (rtl).

• start — то же самое, что left в ltr и right в rtl;
• end — то же, что right в ltr и left в rtl.

Значения start и end подстраиваются под направление текста, например, если текст идет слева направо, то start приравнивается к left, а end к right. И наоборот, когда расположение текста идет справа налево, то в качестве start будет считаться уже правая сторона, а end — левая. Это удобно, когда на сайте используются разные языки и нужно предусмотреть, что изменится направление письма.

Существует также значение match-parent, похожее на inherit, но может наследовать start и end и не учитывает значение свойства direction.

В спецификации есть несколько значений, которые пока не поддерживаются браузерами. Одно из них «start end», которое выравнивает первую строку, как если бы она была start, а любые последующие строки, как если бы они была end. Другое значение представляется в виде строки text-align: "." start. Текст будет выровнен по первому вхождению этой строки ".", что может использоваться, например, для выравнивания чисел с десятичной точкой.

Несколько примеров

See the Pen
text-align by Андрей (@adlibi)
on CodePen.