CSS свойство text-align

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

Для центрирования элемента может быть использовано свойство margin.

Выравнивание, указанное с помощью свойства text-align, не соответствует окну просмотра или содержащему блоку.
Значение по умолчанию left при направлении "ltr", right при направлении "rtl"
Применяется К блочным контейнерам.
Наследуется Да
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.textAlign = "right";

Синтаксис

text-align: left | right | center | justify | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{           
      text-align: right;
      }    
      p{   	
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-align</h2>
    <div>Пример для свойства text-align.</div>
    <p>Например, какой-нибудь параграф.</p>
  </body>
</html>

Пример со значениями “center”, “left” и “justify”:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h2 {
      text-align: center;
      }
      p.date {
      text-align: left;
      }
      p.example {
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-align</h2>
    <p class="date">Март, 2019</p>
    <p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
  </body>
</html>

Значения

Значение Описание
left Выравнивает по левому краю. Значение по умолчанию.
right Выравнивает по правому краю.
center Выравнивает по центру.
justify Увеличивает строки таким образом, чтобы каждая строка имела равную ширину.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+

Практикуйте свои знания

Какие значения может принимать свойство text-align в CSS?
Считаете ли это полезным?