css властивість text-align
Властивість text-align визначає горизонтальне вирівнювання тексту в елементі.
Хоча назва властивості text-align, вона поширюється на весь вбудований вміст блочного контейнера. Тому це не просто вирівнювання тексту - властивість використовується для вирівнювання будь-якого вбудованого вмісту в елементі (якщо він не повністю заповнює контейнер блоку).
Важливо зазначити, що будь-яке вирівнювання, вказане у text-align, не залежить від контейнеру. Блок тексту - це просто стек коробки рядків. Властивість text-align визначає, як кожен лінійний рівень в кожному рядку вирівнюється по відношенню до початкової та кінцевої сторін лінії.
| Нотатка: | Не рекомендується використовувати ключові слова |
Синтаксис
text-align: left|right|center|justify|start|end|initial|inherit;Властивість text-align може отримувати 8 значень:
leftВирівнювання тексту по лівій стороні
rightВирівнювання тексту по правій стороні
centerВирівнювання тексту по центру
justifyВирівнювання тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).
startАналогічно значенню
left, якщо текст йде зліва направо іright, коли текст йде справа наліво.endАналогічно значенню
right, якщо текст йде зліва направо іleft, коли текст йде справа наліво.initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | left, якщо напрямок ltr, right, якщо напрямок rtl |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.textAlign="right" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| left, right, center, justify | 8.0 |
1.0 |
3.5 |
1.0 |
1.0 |
12.0 |
| start | Не підтримується |
Не підтримується |
1.0 |
10.0 |
3.1 |
1.0 |
| end | Не підтримується |
Не підтримується |
1.0 |
Не підтримується |
3.1 |
3.6 |
| Переглядач | |||
|---|---|---|---|
| left, right, center, justify | 1.0 |
1.5 |
1.0 |
| start | 1.5 |
1.0 |
3.1 |
| end | 1.5 |
3.6 |
3.1 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад впливу різних значень властивості на рядок тексту
Використання властивості
Встановлює вирівнювання тексту для елементів <h1>, <h2> та <h3>.
h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }