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
Рядковий вміст шикується до лівого краю рамок строю.
right
Рядковий вміст шикується до правого краю рамок строю.
center
Рядковий вміст центрується в рамках строю.
justify
Рядковий вміст розподіляється рівномірно. Текст повинен отримати такі проміжки, щоб його лівий та правий краї лежали на лівому й правому краях рамок строю, відповідно, крім останнього рядка.
justify-all
Те саме, що
justify
, але, крім того, рівномірно розподіляє останній рядок.match-parent
Подібне до
inherit
, але значенняstart
іend
обчислюються згідно зdirection
батьківського елемента і замінюються відповідним значенням –left
чиright
.
Занепокоєння щодо доступності
Непостійний розмір пробілів між словами, породжений рівномірним шикуванням тексту, може бути проблемним для людей з негараздами мислення, як то дислексією.
- MDN розуміння WCAG, пояснення Настанов 1.4
- Розуміння критерію успіху 1.4.8 | Розуміння WCAG 2.0 (англ.)
Формальне визначення
Початкове значення | 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;
}
Результат
Специфікації
Специфікація |
---|
CSS Logical Properties and Values Level 1 (CSS Logical Properties 1) # text-align |
CSS Text Module Level 3 (CSS Text 3) # text-align-property |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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
|
Chrome Full support 1 | Edge Full support 79 | Firefox Full support 1 | Internet Explorer No support No | Opera Full support 15 | Safari Full support 1.3 | 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 1 | Samsung Internet Full support 1.0 |
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)
|
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 |