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: -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

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

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

center

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

justify

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

justify-all

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

match-parent

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

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

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

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

Початкове значенняstart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
Успадковуєтьсятак
Обчислене значенняas specified, except for the match-parent value which is calculated against its parent\'s direction value and results in a computed value of either left or right

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

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

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
text-align
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Prefixed center, left, and right values for block alignment
Deprecated Non-standard
Chrome Full support 1
prefix
Edge Full support 79
prefix
Firefox Full support 1
prefix
Internet Explorer No support No
Opera Full support 15
prefix
Safari Full support 1.3
prefix
WebView Android Full support 37
prefix
Chrome Android Full support 18
prefix
Firefox for Android Full support 4
prefix
Opera Android Full support 14
prefix
Safari on iOS Full support 1
prefix
Samsung Internet Full support 1.0
prefix
Flow-relative values start and end
Chrome Full support 1
Edge Full support 79
Firefox Full support 1
Internet Explorer No support No
Opera Full support 15
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 2
Samsung Internet Full support 1.0
justify-all
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
match-parent
Chrome Full support 16
Edge Full support 79
Firefox Full support 40
Internet Explorer No support No
Opera Full support 15
Safari Full support 15.4
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 40
Opera Android Full support 14
Safari on iOS Full support 15.4
Samsung Internet Full support 1.0
Character-based alignment in a table column (<string> value)
Experimental
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No

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