Атрибут text-align CSS

Определение и использование

Свойство text-align определяет горизонтальный способ выравнивания текста в элементе.

Эта свойство устанавливает горизонтальный способ выравнивания текста в блочном элементе, определяя, с какой точки рамки строки текста он будет выравниваться. Позволяя пользователю-агенту изменять интервал между буквами и словами в строке, поддерживается значение justify; различные пользователи-агенты могут получить разные результаты.

Дополнительная информация:

Учебник CSS:Текст в CSS

Руководство HTML DOM:Свойство textAlign

Пример

Установите способ выравнивания текста для элементов h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Попробуйте сами

Грамматика CSS

text-align: left|right|center|justify|initial|inherit;

Значение свойства

Значение Описание
left Положите текст на левую сторону. Значение по умолчанию: определяемое браузером.
правильно Разместить текст по правому краю.
center Разместить текст по центру.
justify Реализация эффекта текста с両쪽 정렬.
inherit Указывает, что значение следует inheritance от свойства text-align родительского элемента.

Значение justify

Последним свойством горизонтального выравнивания является justify, у него есть свои проблемы.

Значение justify позволяет выровнять текст по обоим краям. В тексте с両쪽 정�ел текстовые строки с обеих сторон выравниваются по внутренним границам родительского элемента. Затем корректируется интервал между словами и буквами, чтобы длина каждой строки была одинаковой. Вы, возможно, уже заметили, что текст с両쪽 정�ел часто используется в полиграфии. Однако в CSS нужно учитывать больше.

Определение того, как пользовательские агенты (а не CSS) должны растягивать текст с両쪽 정렬, чтобы заполнить пространство между правым и левым краями родительского элемента. Например, некоторые браузеры могут добавлять дополнительное пространство только между словами, в то время как другие могут равномерно распределять дополнительное пространство между буквами (хотя CSS-норматив особенно подчеркивает, что если) свойство letter-spacingУказывается как значение длины ("пользовательские агенты не могут увеличить или уменьшить расстояние между символами еще больше").还有一些用户 агенты могут уменьшить пространство некоторых строк, чтобы текст стал более плотным. Все эти методы влияют на вид элемента, даже могут изменить его высоту, в зависимости от того, как пользовательские агенты влияют на количество строк текста.

CSS также не указывает, как обрабатывать дефисы (Примечание 1). Большинство текстов с両쪽 정렬 используют дефисы для разделения длинных слов на две строки, чтобы уменьшить интервалы между словами и улучшить вид строки текста. Однако, так как CSS не определяет поведение дефисов, пользовательские агенты, вероятно, не будут автоматически добавлять дефисы. Таким образом, текст с両쪽 정렬 в CSS выглядит хуже, чем на печати, особенно если элемент слишком узкий, чтобы на строку умещалось только несколько слов. Конечно, можно использовать узкие элементы дизайна, но следует быть внимательным к соответствующим недостаткам.

Примечание 1:В CSS не указано, как обрабатывать дефисы, так как у разных языков есть свои правила дефисов. Норматив не пытается сгладить такие, возможно, неполные правила, а просто не упоминает эту проблему.

Технические детали

Значение по умолчанию: Если свойство direction равно ltr, то значение по умолчанию - left; если direction равно rtl, то right.
Ингерит: да
Версия: CSS1
JavaScript синтаксис: объект.style.textAlign="right"

Более примеров

Выравнивание текста
Этот пример демонстрирует, как выровнять текст.

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5