css властивість text-align


Властивість text-align визначає горизонтальне вирівнювання тексту в елементі.

Властивість `text-align`

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

Важливо зазначити, що будь-яке вирівнювання, вказане у text-align, не залежить від контейнеру. Блок тексту - це просто стек коробки рядків. Властивість text-align визначає, як кожен лінійний рівень в кожному рядку вирівнюється по відношенню до початкової та кінцевої сторін лінії.

Нотатка:

Не рекомендується використовувати ключові слова start і end. Вони ще на експериментальній стадії розробки.

Синтаксис

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

Додаткові посилання