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

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

Попробуйте

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section id="default-example">
  <div id="example-element">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

Синтаксис

/* Keyword values */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

start

То же, что и left, если направление текста слева направо, и right, если направление текста справа налево.

end

То же, что и right, если направление текста слева направо, и left, если направление текста справа налево.

left

Строчное содержимое выравнивается по левому краю строчной области.

right

Строчное содержимое выравнивается по правому краю строчной области.

center

Строчное содержимое выравнивается по центру строчной области.

justify

Строчное содержимое выравнивается по ширине. Пробелы распределяются так, чтобы выровнять его левый и правый края по левому и правому краям строчной области, за исключением последней строки.

match-parent

Похоже на inherit, но значения start и end вычисляются в соответствии со свойством direction родительского элемента и заменяются соответствующим значением left или right.

Доступность

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

• MDN: пояснения к руководству WCAG, рекомендация 1.4

• [Понимание критерия успеха 1.4.8

  Понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

Формальное определение

Формальный синтаксис

text-align = 
  start |
  end |
  left |
  right |
  center |
  justify |
  match-parent

Примеры

Выравнивание по началу

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: start;
  border: solid;
}

Результат

Текст по центру

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: center;
  border: solid;
}

Результат

Пример с использованием «justify»

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: justify;
  border: solid;
}

Результат

Выравнивание в таблице

В этом примере показано использование text-align для элементов <table>:

• Для элемента <caption> задано выравнивание по правому краю.
• Первые два элемента <th> наследуют выравнивание по левому краю, заданное свойством text-align: left для элемента <thead>, а для третьего задано выравнивание по правому краю.
• Внутри элемента <tbody> для первой строки задано выравнивание по правому краю, для второй — по центру, а для третьей используется выравнивание по умолчанию (по левому краю).
• В каждой строке для некоторых ячеек (c12, c31) задано переопределение выравнивания строки.

HTML

<table>
  <caption>
    Example table
  </caption>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th class="right">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="right">
      <td>11</td>
      <td class="center">12</td>
      <td>13</td>
    </tr>
    <tr class="center">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr id="r3">
      <td class="right">31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}

thead {
  text-align: left;
}

td,
th {
  border: solid 1px black;
}

.center {
  text-align: center;
}

.right,
caption {
  text-align: right;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• margin: auto, margin-left: auto, vertical-align