text-align

Властивість CSS text-align (шикування тексту) задає горизонтальне шикування вмісту рядкового рівня всередині блокового елемента чи рамок комірки таблиці. Це означає, що вона працює подібно до vertical-align, але в горизонтальному напрямку.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;

/* Значення блокового шикування (нестандартний синтаксис) */
text-align: -moz-center;
text-align: -webkit-center;

/* Глобальні значення */
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

Рядковий вміст шикується до лівого краю рамок строю.

right

Рядковий вміст шикується до правого краю рамок строю.

center

Рядковий вміст центрується в рамках строю.

justify

Рядковий вміст розподіляється рівномірно. Розділяє вміст проміжками так, щоб його лівий та правий краї лежали на лівому й правому краях рамок строю, відповідно, крім останнього рядка.

match-parent

Подібне до inherit, але значення start і end обчислюються згідно з direction батьківського елемента і замінюються відповідним значенням – left чи right.

Доступність

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

• MDN розуміння WCAG, пояснення Настанов 1.4
• Розуміння критерію успіху 1.4.8 | Розуміння WCAG 2.0

Формальне визначення

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

start | end | left | right | center | justify | match-parent

Приклади

Шикування start

HTML

<p class="example">
  Глупість тисячі нерозумних живописців не може примусити нас зневажати
  живописне мистецтво, а научає, що ця наука многотрудна, і тільки дехто з
  величезної кількості любителів її осягає.
</p>

CSS

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

Результат

Центрований текст

HTML

<p class="example">
  Глупість тисячі нерозумних живописців не може примусити нас зневажати
  живописне мистецтво, а научає, що ця наука многотрудна, і тільки дехто з
  величезної кількості любителів її осягає.
</p>

CSS

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

Результат

Приклад з використанням "justify"

HTML

<p class="example">
  Глупість тисячі нерозумних живописців не може примусити нас зневажати
  живописне мистецтво, а научає, що ця наука многотрудна, і тільки дехто з
  величезної кількості любителів її осягає.
</p>

CSS

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

Результат

Вирівнювання таблиць

Цей приклад демонструє використання text-align на елементах <table>:

• <caption> задано шикування праворуч.
• Перші два елементи <th> успадковують шикування ліворуч text-align: left, задане на <thead>, а третьому задане шикування праворуч.
• Всередині елемента <tbody> першому ряду задано шикування праворуч, другому – шикування по центру, а третій користується усталеним шикуванням (ліворуч).
• У кожному ряду певним коміркам (к12, к31) задано інше шикування, ніж у ряду.

HTML

<table>
  <caption>
    Таблиця-приклад
  </caption>
  <thead>
    <tr>
      <th>Колонка 1</th>
      <th>Колонка 2</th>
      <th class="right">Колонка 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