text-align

Резюме

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

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

Синтаксис

Формальный синтаксис: 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 значением.

Примеры

Посмотреть живые примеры

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

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 and Values Level 1
Определение 'text-align' в этой спецификации.		 Редакторский черновик Нет изменений
CSS Text Module Level 3
Определение 'visibility' в этой спецификации.		 Рабочий черновик Добавлены ключевые слова start, end и match-parent. Изменено безымянное начальное значение в start (которое было).
CSS Level 2 (Revision 1)
Определение 'text-align' в этой спецификации.		 Рекомендация Нет изменений
CSS Level 1
Определение 'text-align' в этой спецификации.		 Рекомендация Исходное определение.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность 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 атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.

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

Связанные темы