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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-align: left|right|center|justify|start|end|initial|inherit;

Властивість text-align може отримувати 8 значень:

left

Вирівнювання тексту по лівій стороні

автор: Svitlana

правити

right

Вирівнювання тексту по правій стороні

автор: Svitlana

правити

center

Вирівнювання тексту по центру

автор: Svitlana

правити

justify

Вирівнювання тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

start

Аналогічно значенню left, якщо текст йде зліва направо і right, коли текст йде справа наліво.

автор: Svitlana

правити

end

Аналогічно значенню right, якщо текст йде зліва направо і left, коли текст йде справа наліво.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
left, right, center, justify	1.0	1.0	1.0	3.5	12.0	8.0
start	1.0	1.0	3.1	10.0	Не підтримується	Не підтримується
end	1.0	3.6	3.1	Не підтримується	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
left, right, center, justify	1.5	1.0	1.0
start	1.5	1.0	3.1
end	1.5	3.6	3.1

Приклади

+ запропонувати свій приклад у пісочниці

<h1>По центру</h1>
<h2>Ліворуч</h2>
<h3>Праворуч</h3>

h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }