Свойство text-align
Свойство text-align задаёт горизонтальное выравнивание содержимого элемента.
| Применяется: | к блок-контейнерам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | не используются; |
| Медиа : | визуальные. |
JavaScript
[объект] .style .textAlign =»[значение]»;
Поддержка браузерами
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.4.6 ‘text-align’ | Перевод |
| 2 | 16.2 Alignment: the ‘text-align’ property | |
| 2.1 | 16.2 Alignment: the ‘text-align’ property | |
| 2.2 | 16.2 Alignment: the ‘text-align’ property | |
| 3 | 7.1. Text Alignment: the ‘text-align’ property | |
Значения
left Выравнивает содержимое по левому краю блока.
center Выравнивает содержимое блока по центру.
right Выравнивает содержимое по правому краю блока.
justify Выравнивает содержимое по обоим краям блока. (В случае необходимости увеличивается ширина пробелов между словами.)
start Выравнивает содержимое по началу края блока. Анаголичен значению « left » при direction: ltr; , « right » при direction: rtl; . end Выравнивает содержимое по конечному краю блока. Анаголичен « right » при direction: ltr; , « left » при direction: rtl; . inherit Указывает, что элемент должен унаследовать параметры родительского элемента. match-parent аналогичен свойству « inherit », но в отличии от него он может наследовать свойство « start » или « end », при этом значение свойства « direction » (если оно указано) не учитывается. start end « start » указывает выравнивание первой и следующей за ней (после принудительного разрыва) строки; « end » выравнивает все остальные линии.
Начальное значение: Зависит от агента пользователя. « left » при direction: ltr , « right » при direction: rtl . « start »
Свойство text-align, горизонтальное выравнивание текста
Следующее свойство text-align описывает, как выравнивается текст внутри блока по горизонтали (на самом деле не только текст, но об этом в следующем задании).
Свойство может принимать следующие значения:
- left — выравнивание по левому краю блока, это значение по умолчанию;
- right — по правому краю блока;
- center — по центру блока;
- justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).
Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:Я текст внутри абзаца
CSS: p
На самом деле существует ещё два значения text-align : это выравнивание к началу блока start и выравнивание к концу блока end . Если вы попробуете применить эти значения, то увидите, что эффект от значения start совпадает со значением left , а end делает то же самое, что и right .
Но это не всегда так. Дело в том, что не во всех языках текст пишется слева направо. Например, в японском текст пишется сверху вниз, и в этом случае значения left и right уже не так логичны, как в «европейских» языках.
Именно чтобы сделать CSS-код универсальным для любых направлений написания текста и появились такие значения text-align . Кстати, для управления направлением текста есть специальное свойство — writing-mode.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
text — align
Выравниваем текст по левому или правому краю. А может быть по центру?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Подсказки
- На практике
- Андрей Резников советует
- Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Андрей Резников
Обновлено 15 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
text — align управляет выравниванием контента (к примеру текста) по горизонтали внутри родительского элемента.
Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега ), либо значением свойства direction ( ltr — слева направо, rtl — справа налево).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- start — выравнивание по тому краю, по которому принято в текущем языке (значение по умолчанию).
- end — по противоположному краю для текущего языка.
- left — по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по ширине. Текст растягивается от левого до правого края.
- match — parent — по значению direction родителя.
Значение, поддержка для которого в будущем будет расширена:
- justify — all — тоже самое, что justify , но включая последнюю строку.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение свойства наследуется.
�� Значение по умолчанию — start .
�� При разработке приложений с интернационализацией используйте start и end вместо left и right .
�� Выравнивание текста нельзя анимировать при помощи transition ☹️
�� В случае необходимости выравнивания последней строки используйте text — align — last , значения свойства совпадают с text — align .
На практике
Скопировать ссылку «На практике» Скопировано
Андрей Резников советует
Скопировать ссылку «Андрей Резников советует» Скопировано
�� Свойство text — align можно использовать для выравнивания изображений.
Один из вариантов выравнивания картинки по горизонтали:
- Убедиться, что родитель является блочным элементом ( display : block ).
- Применить свойство text — align к родителю.
div class="parent"> img alt=". " src=". " class="image" /> div>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center;>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center; >Открыть демо в новой вкладке + Развернуть
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
������div class="parent"> div class="child">��div> div class="child">��div> div class="child">��div> div>.parent width: 80%; margin: 0 auto; padding: 25px;> .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold;>.parent width: 80%; margin: 0 auto; padding: 25px; > .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold; >Добавим элементу .parent свойство text — align : center и элементы .child выровняются по центру родителя:
А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text — align : justify ?
Ожидаемого поведения не получилось, и вот почему ��
�� У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.
.parent::after content: ''; display: inline-block; width: 100%;>.parent::after content: ''; display: inline-block; width: 100%; >text-justify¶
Свойство text-justify определяет какой тип выравнивания следует применить к тексту, когда text-align: justify; применяется к элементу.
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12
text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* Deprecated value */ /* Global values */ text-justify: inherit; text-justify: initial; text-justify: revert; text-justify: revert-layer; text-justify: unset;Значения¶
Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства text-align , хотя оно полезно, если вам нужно включать и выключать выравнивание.
Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т. п.). Оно используется по умолчанию, если text-justify не установлен.
Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя word-spacing ), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.
Выравнивание текста по средствам добавления пробелов между символами (эффективно варьируя letter-spacing ), что наиболее подходит для таких языков как японский.
Показывает тоже поведение, что и inter-character это значение сохранилось для обратной совместимости.
Спецификация¶
Пример¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
p font-size: 1.5em; border: 1px solid black; padding: 10px; width: 95%; margin: 10px auto; text-align: justify; > .none text-justify: none; > .auto text-justify: auto; > .dist text-justify: distribute; > .word text-justify: inter-word; > .char text-justify: inter-character; >