Кратко
Скопированоtext
выравнивает текст по горизонтали внутри блока.
Если это свойство не задано, то текст выравнивается по левому краю.
Примеры
СкопированоКлючевое слово:
p { text-align: center;}
p { text-align: center; }
Специальные значения для столбца в таблице:
p { text-align: "."; text-align: "." center;}
p { text-align: "."; text-align: "." center; }
Выравнивание блока (нестандартный синтаксис):
p { text-align: -moz-center; text-align: -webkit-center;}
p { text-align: -moz-center; text-align: -webkit-center; }
Как пишется
СкопированоУ text
есть четыре варианта значений:
center
— выравнивание по центру.justify
— выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.left
— выравнивание по левому краю (значение по умолчанию).right
— выравнивание по правому краю.
Не так давно появилось ещё два крайне удобных значения:
start
— текст выровнен по тому краю, по которому принято в текущем языке.end
— текст выровнен по противоположному краю для текущего языка.
Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start
будет выравнивать текст по левому краю, а end
— по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start
выровняет текст по правому краю, а end
по левому. При этом вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang
у тега <html>
. Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.
Подсказки
Скопировано💡 Значение свойства наследуется.
💡 Значение по умолчанию — left
.
💡 Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin
со значением auto
: например, margin
, margin
, margin
.
💡 Выравнивание текста нельзя анимировать при помощи transition
☹️
Ещё пример
СкопированоВот сразу три варианта выравнивания текста внутри контейнера <div>
. В этом примере мы задаём выравнивание в CSS-стилях, привязывая их к классам left
, right
, center
, так что в HTML остаётся только добавить элементу атрибут класса с нужным именем, вроде class
:
<div class="left"> <div class="content">Выравнивание по левому краю</div></div><div class="center"> <div class="content">Выравнивание по центру</div></div><div class="right"> <div class="content">Выравнивание по правому краю</div></div>
<div class="left"> <div class="content">Выравнивание по левому краю</div> </div> <div class="center"> <div class="content">Выравнивание по центру</div> </div> <div class="right"> <div class="content">Выравнивание по правому краю</div> </div>
.left { text-align: left;}.right { text-align: right;}.center { text-align: center;}div { border: 1px solid; padding: 15px;}.content { /* Ширина вложенного контейнера */ width: 75%;}
.left { text-align: left; } .right { text-align: right; } .center { text-align: center; } div { border: 1px solid; padding: 15px; } .content { /* Ширина вложенного контейнера */ width: 75%; }
На практике
Скопированосоветует Скопировано
🛠 Свойство text
можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных (inline
) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div></div>
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>
.parent { box-sizing: border-box; width: 80%; margin: 0 auto; padding: 25px;}.child { box-sizing: border-box; display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 75px; font-weight: bold;}
.parent { box-sizing: border-box; width: 80%; margin: 0 auto; padding: 25px; } .child { box-sizing: border-box; display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 75px; 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%; }