Резюме
text-align CSS свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.
| Начальное значение | start, или неназванное значение, которое действует как left, если direction: ltr или как right, если direction: rtl, а если start не поддерживается браузером. |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Отображение | визуальный |
| Обработка значения | как указано, кроме значения match-parent, которое вычисляется вместо значения его родителя direction, а результаты в вычисленном значении left или right |
| Animation type | discrete |
| Канонический порядок | порядок появления в формальной грамматике значений |
Синтаксис
Формальный синтаксис: 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 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 атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.