Резюме
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
значением.
Примеры
Живые примеры
p { background:gold; width:22em; }
несколько текста...p { background:gold; width:22em; margin: 1em auto; }
несколько текста...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
атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.