text-align

Выравниваем текст по левому или правому краю. А может быть по центру?

Время чтения: меньше 5 мин

Кратко

Скопировано

text-align выравнивает текст по горизонтали внутри блока.

Если это свойство не задано, то текст выравнивается по левому краю.

Примеры

Скопировано

Ключевое слово:

        
          
          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-align есть четыре варианта значений:

  • center — выравнивание по центру.
  • justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
  • left — выравнивание по левому краю (значение по умолчанию).
  • right — выравнивание по правому краю.

Не так давно появилось ещё два крайне удобных значения:

  • start — текст выровнен по тому краю, по которому принято в текущем языке.
  • end — текст выровнен по противоположному краю для текущего языка.

Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этом вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега <html>. Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.

Подсказки

Скопировано

💡 Значение свойства наследуется.

💡 Значение по умолчанию — left.

💡 Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin со значением auto: например, margin: auto, margin: 0 auto, margin-left: auto; margin-right: auto.

💡 Выравнивание текста нельзя анимировать при помощи transition ☹️

Ещё пример

Скопировано

Вот сразу три варианта выравнивания текста внутри контейнера <div>. В этом примере мы задаём выравнивание в CSS-стилях, привязывая их к классам left, right, center, так что в HTML остаётся только добавить элементу атрибут класса с нужным именем, вроде class="left":

        
          
          <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-align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных (inline-block) элементов внутри родителя.

С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.

Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:

        
          
          <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-align: center и элементы .child выровняются по центру родителя:

Открыть демо в новой вкладке

А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text-align: justify?

Открыть демо в новой вкладке

Ожидаемого поведения не получилось, и вот почему 👇

🛠 У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.

        
          
          .parent::after {  content: "";  display: inline-block;  width: 100%;}
          .parent::after {
  content: "";
  display: inline-block;
  width: 100%;
}

        
        
          
        
      
Открыть демо в новой вкладке