Кратко
Скопированоtext управляет выравниванием контента (к примеру текста) по горизонтали внутри родительского элемента.
Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега <html>), либо значением свойства direction (ltr — слева направо, rtl — справа налево).
Как пишется
Скопированоstart— выравнивание по тому краю, по которому принято в текущем языке (значение по умолчанию).end— по противоположному краю для текущего языка.left— по левому краю.right— по правому краю.center— по центру.justify— по ширине. Текст растягивается от левого до правого края.match— по значению- parent directionродителя.
Значение, поддержка для которого в будущем будет расширена:
justify— тоже самое, что- all justify, но включая последнюю строку.
Подсказки
Скопировано💡 Значение свойства наследуется.
💡 Значение по умолчанию — start.
💡 При разработке приложений с интернационализацией используйте start и end вместо left и right.
💡 Выравнивание текста нельзя анимировать при помощи transition ☹️
💡 В случае необходимости выравнивания последней строки используйте text, значения свойства совпадают с text.
На практике
Скопированосоветует
Скопировано🛠 Свойство text можно использовать для выравнивания изображений.
Тег <img> является строчным (display).
Один из вариантов выравнивания картинки по горизонтали:
- Убедиться, что родитель является блочным элементом (
display).: block - Применить свойство
textк родителю.- align
<div class="parent"> <img alt="..." src="..." class="image" /></div>
<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 можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных (inline) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
<div class="parent"> <div class="child">🙈</div> <div class="child">🙉</div> <div class="child">🙊</div></div>
<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 и элементы .child выровняются по центру родителя:
А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text?
Ожидаемого поведения не получилось, и вот почему 👇
🛠 У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.
.parent::after { content: ''; display: inline-block; width: 100%;}
.parent::after {
content: '';
display: inline-block;
width: 100%;
}