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: justify-all;
text-align: match-parent;

/* Посимвольне шикування в колонці таблиці */
text-align: ".";
text-align: "." center;

/* Значення блокового шикування (нестандартний синтаксис) */
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, end, left, right, center, justify, justify-all чи match-parent.
• За допомогою лиш значення <string>, у випадку чого решта значень вважаються right.
• За допомогою і ключового слова, і значення <string>.

Значення

start

Те саме, що left, якщо напрям тексту – зліва направо, і right, якщо справа наліво.

end

Те саме, що right, якщо напрям тексту – зліва направо, і left, якщо справа наліво.

left

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

right

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

center

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

justify

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

justify-all

Те саме, що justify, але, крім того, рівномірно розподіляє останній рядок.

match-parent

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

<string>

Бувши застосованим до комірки таблиці, таке значення задає символ шикування, навколо якого шикуватиметься вміст комірки.

Занепокоєння щодо доступності

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

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

Результат

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

Сумісність із браузерами

Дивіться також

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