/ ↲
    Расширенный поиск

    CSS

    text-align

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

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

    1. Кратко
    2. Примеры
    3. Как пишется
    4. Подсказки
    5. Ещё пример
    6. На практике
      1. Алёна Батицкая советует

    Кратко

    Скопировано

    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%;
}
    Открыть демо в новой вкладке

    Читайте также