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%; >