выравнивание текста

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

Синтаксис

/* 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;

Свойство text-align задается одним ключевым словом из приведенного ниже списка.

Значения

start: То же самое, что и left, если направление слева направо, и right, если направление справа налево.
end: То же самое, что и right, если направление слева направо, и left, если направление справа налево.
left: Содержимое типа inline выравнивается по левому краю области строки.
right: Содержимое типа inline выравнивается по правому краю области строки.
center: Содержимое типа inline центрируется внутри области строки.
justify: Содержимое типа inline выравнивается по ширине. Распределяет содержимое таким образом, чтобы его левые и правые края выравнивались с левыми и правыми краями области строки, за исключением последней строки.
match-parent: Подобно inherit, но значения start и end вычисляются в соответствии со значением родительского элемента direction и заменяются соответствующими значениями left или right.

Доступность

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

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

Начальное значение	`start`, или безымянное значение, которое действует как `left` если `direction` равно `ltr`, `right` если `direction` равно `rtl` если `start` не поддерживается браузером.
Применимо к	блочным контейнерам
Наследуется	да
Вычисленное значение	как указано, за исключением значения `match-parent`, которое вычисляется относительно значения `direction` его родительского элемента и приводит к вычисленному значению `left` или `right`
Тип анимации	дискретный

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

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

Примеры

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

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;
}

Результат

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

Спецификация
CSS Логические свойства и значения Уровень 1 # выравнивание-текста
CSS Модуль текста Уровень 3 # свойство-выравнивания-текста

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

	Стационарные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-align`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`center`	11	7979	11	1515	≤41.31	1818	44	1414	≤3.211	1.01.0	37
`end`	1	79	1	15	3.1	18	4	14	2	1.0	37
`justify`	1	12	1	15	1	18	4	14	1	1.0	4.4
`left`	11	7979	11	1515	≤41.31	1818	44	1414	≤3.211	1.01.0	37
`match-parent`	16	79	40	15	15.4	18	40	14	15.4	1.0	37
`right`	11	7979	11	1515	≤41.31	1818	44	1414	≤3.211	1.01.0	37
`start`	1	79	1	15	3.1	18	4	14	2	1.0	37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align