Свойство CSS выравнивания текста используется для горизонтального выравнивания содержимого блоков, строчно-блочных элементов и ячеек таблиц. Из этого урока вы узнаете больше о способах выравнивания текста и научитесь использовать новые свойства.

Пример записи:

p {
text-align: center;
}

Следующие значения поддерживаются буквально всеми версиями браузеров:

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

Содержимое чаще всего является текстом, но также может быть и другими строчными или строчно-блочными элементами, находящимися в блоке, которому задается свойство выравнивания текста.

Следующие значения введены в CSS3 и поддерживаются многими старыми и новыми версиями браузеров, кроме старых версий браузера Opera и всех версий браузера Internet Explorer. Эти значения удобны для многоязычных сайтов. Например, русский и английский языки пишутся и читаются слева направо, а арабский язык пишется и читается справа налево. Использование просто значений выравнивания по левому или правому краю не позволяет выбирать направление в зависимости от типа письменности.

• start - содержимое выравнивается по началу, если направление слева направо, и происходит выравнивание по левому краю или, если направление справа налево, — происходит выравнивание по правому краю.
• end — содержимое выравнивается по концу, если направление слева направо, и происходит выравнивание по правому краю или, если направление справа налево, — происходит выравнивание по левому краю.

Еще есть новые значения, которые на момент написания урока, в начале 2016 года, не поддерживаются браузерами:

•  justify-all — аналогично значению justify, но последняя строка тоже растягивается по ширине блока.
• match-parent — аналогично значению inherit, но вычисляет значение, используя направление родительского элемента.
• <string> — используются такие записи, как: text-align: «.»; text-align: start «.»; text-align: «.» end. Текст выравняется по первому появлению ключевого значения, что позволит, например, выравнять столбец чисел с десятичной точкой.
• start end — первая строка содержимого выравнивается по началу, а последующие строки выравниваются по концу.

HTML:

<iframe width="100%" height="300" src="//jsfiddle.net/3zvfqd49/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Дополнительные и использованные материалы:

• Спецификация CSS1
• Спецификация CSS2
• Спецификация CSS3
• Mozilla Developer Network
• Mozilla Developer Network
• CSS-Tricks

Автор урока — Maya Specctra специально для Дежурки

Смотрите также:

• Задаем стили элементам в зависимости от количества потомков
• Определение поддержки браузером конкретных свойств CSS с помощью правила @supports
• Использование наследования в CSS3