Свойство CSS text-align

Свойство CSS text-align задаёт горизонтальное выравнивание строчного содержимого внутри блочного контейнера. Проще говоря, оно управляет тем, как текст (и строчные элементы, такие как <a>, <img> или <span>) располагается внутри родительского блока: прижат к левому краю, к правому, центрирован или растянут по всей строке.

На этой странице описаны синтаксис, все значения с пояснением их действия, рабочие примеры, распространённые подводные камни, а также отличие text-align от центрирования самого блока.

Почему text-align — это не то же самое, что центрирование блока

Частый источник путаницы: text-align: center центрирует содержимое внутри блока, а не блок внутри его родителя. Свойство выравнивает строчное содержимое относительно содержащего его блока — оно не перемещает сам блок относительно родительского элемента или viewport.

Чтобы горизонтально центрировать блочный элемент (например, <div> фиксированной ширины), задайте ему ширину и используйте автоматические горизонтальные отступы — см. свойство margin. Используйте text-align, когда хотите расположить текст внутри элемента; используйте margin: 0 auto, когда хотите расположить сам элемент.

Информация

Выравнивание, заданное с помощью text-align, не относится к содержащему блоку или viewport — оно располагает строчное содержимое внутри собственного блока.

Начальное значение	left, если направление «ltr»; right, если направление «rtl»
Применяется к	Блочным контейнерам.
Наследуется	Да
Анимируется	Нет.
Версия	CSS1
DOM Синтаксис	object.style.textAlign = "right";

Синтаксис

Синтаксис свойства CSS text-align

text-align: left | right | center | justify | initial | inherit;

Пример свойства text-align со значениями "right" и "center":

Пример свойства CSS text-align со значениями right и center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства text-align со значениями "center", "left" и "justify":

Пример свойства CSS text-align со значениями left, center и justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Попробуйте сами »

При значении justify каждая строка, кроме последней, растягивается так, чтобы её левый и правый края совпадали с краями блока; браузер добавляет дополнительные пробелы между словами. Именно поэтому justify лучше всего смотрится на широких многострочных абзацах и может создавать некрасивые разрывы в узких колонках.

Значения

Свойство text-align принимает следующие значения:

Значение	Описание	Попробовать
left	Выравнивает текст по левому краю. Это значение по умолчанию.	Попробовать »
right	Выравнивает текст по правому краю.	Попробовать »
center	Выравнивает текст по центру.	Попробовать »
justify	Растягивает строки так, чтобы каждая из них имела одинаковую ширину.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует значение свойства от родительского элемента.

Примечания и распространённые подводные камни

Влияет только на строчное содержимое. text-align не действует на дочерний блочный элемент, не являющийся строчным. Для горизонтального позиционирования блока задайте ему ширину и margin: 0 auto, либо используйте Flexbox или CSS Grid.
Свойство наследуется. Поскольку свойство наследуется, установка text-align: center на <body> распространяется на всех потомков, пока что-то не переопределит его. Задавайте его на максимально конкретном элементе, чтобы избежать неожиданностей.
Учитывает направление текста. Начальное значение зависит от direction: left для текста слева направо (ltr) и right для текста справа налево (rtl). Логические значения start и end соответствуют началу/концу строки независимо от направления.
Центрирование изображений. Поскольку <img> является строчным элементом, text-align: center на его блочном родителе также центрирует изображение — удобно для быстрого центрирования без Flexbox.
justify и последняя строка. justify никогда не растягивает последнюю строку абзаца — она сохраняет естественное начальное выравнивание. Управляйте ею отдельно с помощью text-align-last.

Связанные свойства

text-align-last — выравнивает последнюю строку выровненного по ширине блока.
text-indent — задаёт отступ первой строки текста.
text-justify — точно настраивает распределение пространства при justify.
direction — задаёт направление текста, которое определяет выравнивание по умолчанию.
vertical-align — выравнивает строчное содержимое по вертикали (перпендикулярная ось).

Практика

Какие из следующих значений являются допустимыми для свойства 'text-align' в CSS?