text-align

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Резюме

text-align CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.

Начальное значениеstart, или неназванное значение, которое действует как left, если direction: ltr или как right, если direction: rtl, а если start не поддерживается браузером.
Применяется кблочные контейнеры
Наследуетсяда
Обработка значениякак указано, кроме значения match-parent, которое вычисляется вместо значения его родителя direction, а результаты в вычисленном значении left или right
Animation typediscrete

Синтаксис

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

text-align = 
start |
end |
left |
right |
center |
justify |
match-parent |
justify-all

css
text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end

text-align: inherit

Значения

start Экспериментальная возможность

Подобно left если направление слева направо, и right если наоборот.

end Экспериментальная возможность

Подобно right если направление слева направо, и left если наоборот.

left

Линейное содержимое выравнивается по левому краю линейного блока.

Линейное содержимое выравнивается по правому краю линейного блока.

center

Линейное содержимое центрируется в линейном блоке.

<string> Экспериментальная возможность

Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.

justify

Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.

match-parent Экспериментальная возможность

Наподобие inherit с различием, что значение start и end вычисляются в соответствии direction и заменяются соответствующим left или right значением.

Примеры

Живые примеры

div { text-align: center; border:solid; }

p { background:gold; width:22em; }

несколько текста...div { text-align: center; border:solid; }

p { background:gold; width:22em; margin: 1em auto; }

несколько текста...div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

p { background:gold; width:22em; }

несколько текста...

Примечание

Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример: margin:auto; или margin:0 auto; или margin-left:auto; margin-right:auto;

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

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-align
center
end
justify
left
match-parent
right
start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Смотрите также