text-align

Резюме

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

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

Синтаксис

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

Примеры

View Live Examples

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

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;

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

Спецификация Статус Комментарий
CSS Logical Properties Level 1
Определение 'text-align' в этой спецификации.
Редакторский черновик Нет изменений
CSS Text Level 3
Определение 'visibility' в этой спецификации.
Рабочий черновик Добавлены ключевые слова start, end и match-parent. Изменено безымянное начальное значение в start (которое было).
CSS Level 2 (Revision 1)
Определение 'text-align' в этой спецификации.
Рекомендация Нет изменений
CSS Level 1
Определение 'text-align' в этой спецификации.
Рекомендация Исходное определение.

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (left, right, center and justify) 1.0 1.0 (1.7 или ранее) 3.0 3.5 1.0 (85)
Block alignment values [1] 1.0-webkit 1.0 (1.7 или ранее)-moz Нет Нет 1.0 (85)-khtml
1.3 (312)-webkit
start 1.0 1.0 (1.7 или ранее) Нет (Да) 3.1 (525)
end 1.0 3.6 (1.9.2) Нет Нет 3.1 (525)
match-parent 16 Нет Нет Нет Нет
string>
value
Нет Нет Нет Нет Нет
Возможность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ? ?
Block alignment values [1] ? ? ? ? ? ?
start ? ? ? ? ? ?
end ? ? ? ? ? ?
match-parent ? ? ? ? ? ?
<string> value ? ? ? ? ? ?

[1] Оба WebKit и Gecko поддерживают префиксную версию left, center, и right, которая применяется не только к линейному содержимому, но также и к блочным элементам. Это используется для реализации унаследованных align атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.

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

Метки документа и участники

 Внесли вклад в эту страницу: Guillaume-Heras, BychekRU, Sebastianz, frost-nzcr4, Sheppy, ldone
 Обновлялась последний раз: Guillaume-Heras,