Выравнивание текста - CSS-хитрости

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

p ( text-align: center; )

Это традиционные значения для выравнивания текста:

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

«Контент» используется здесь как термин вместо «текст», потому что, хотя выравнивание текста определенно влияет на текст, оно влияет на все встроенные или встроенные блочные элементы в этом контейнере.

В CSS3 также есть два новых значения: start и end. Эти значения упрощают поддержку нескольких языков. Например, английский - язык с письмом слева направо (ltr), а арабский - язык с письмом справа налево (rtl). Использование «правого» и «левого» для значений слишком жестко и не адаптируется к изменению направления. Эти новые ценности адаптируются:

• start - То же, что «left» в ltr, то же самое, что «right» в rtl.
• end - То же, что «right» в ltr, то же самое, что «left» в rtl.

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

В спецификации есть несколько вещей, которые пока не поддерживаются браузером. Одним из них является значение «start end», которое выравнивает первую строку, как если бы она была «start», и любые последующие строки, как если бы она была «end». Другой дает значение в виде строки, например, text-align: "." start;текст будет выровнен по первому вхождению этого значения, чтобы выровнять столбец чисел по десятичной запятой.

Примеры

Этот текст выровнен по левому краю.

Этот текст выровнен по правому краю.

Я в центре!

Я оправдан. Я заполняю пространство точно (кроме последней строки), даже если мне иногда приходится немного растягиваться.

Я наследую мировоззрение своего родителя. В данном случае это означает левый.

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

По левому, правому, центру, по ширине:

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
Любой	Любой	Любой	3.5+	3+	Любой	Любой

Для startи endзначений:

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
Любой	3.1+	3.6+	Никто	Никто	Любой	Любой