text-align

Резюме

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

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

Синтаксис

Формальный синтаксис: 
text-align = 
start | (en-US)
end | (en-US)
left | (en-US)
right | (en-US)
center | (en-US)
justify | (en-US)
match-parent | (en-US)
justify-all

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 Experimental
Подобно left если направление слева направо, и right если наоборот.
end Experimental
Подобно right если направление слева направо, и left если наоборот.
left
Линейное содержимое выравнивается по левому краю линейного блока.
Линейное содержимое выравнивается по правому краю линейного блока.
center
Линейное содержимое центрируется в линейном блоке.
<string> Experimental
Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.
justify
Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
match-parent Experimental
Наподобие 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

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

BCD tables only load in the browser

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