text-align

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

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

Кратко

Скопировано

text-align управляет выравниванием контента (к примеру текста) по горизонтали внутри родительского элемента.

Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега <html>), либо значением свойства 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 можно использовать для выравнивания изображений.

Тег <img> является строчным (display: inline).

Один из вариантов выравнивания картинки по горизонтали:

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

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

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

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

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

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

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

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

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

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

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