Характеристики свойства
В каких браузерах работает?
CSS | |||||||
2.1 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | - | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
+ | + | + | + |
Для чего используется?
Устанавливает особенность распределения текста по ширине контейнера. Наиболее распространенных существует три: выравнивание по левому краю, по всей ширине блока, по центру.
Как правильно задавать?
text-align:способ выравнивания;
Какие могут быть значения?
- center - центрирует текст в контейнере. Такая текстовая ориентация зачастую применяется для прописания заглавного текста, подзаголовков и пояснения к элементам по типу таблица или рисунока. Для основного объема контента такое выравнивание применяется достаточно редко, так как это не целесообразно с точки зрения читабельности.
- justify - заполняет текстом всю ширину блока за счет дополнительного добавления пробелов между словами. За счет этого текст ровно распределяется по левой и правой стороне.
- left - текст равняется по левому полю. Такой способ очень популярен на интернет просторах. Это объясняется тем, что правый край текста не равняется в одну линию, что исключает возможность потери предыдущей строки при чтении.
- right - равняет текст по правой стороне, левая выглядит беспорядочно. Применяется редко, в основном для заголовков и особых цитат или комментариев.
- auto - текст отображается по усмотрению браузера (обычно по левому краю).
- inherit - повторяет текстовое оформление родительского элемента.
- start - равнение по левому краю, если читать нужно слева на право, и по правому если нужно читать в обратном направлении.
- end - равнение по правому краю, если читать нужно слева на право, и по левому если нужно читать в обратном направлении.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство text-align</title> <style> h3 { text-align:center; color:#444; } .content { text-align:left; border:1px dashed #a6a6a6; background:#fefcc6; padding:5px; } .author { text-align:right; text-decoration:underline; } </style> </head> <body> <h3>Заголовок</h3> <p class="content">Основной текст, который чаще всего выравнивается или по левому краю, или по все ширине. Это два наиболее распространенных метода выравнивания контента.</p> <p class="author">Подпись автора</p> </body> </html>
По итогу получаем
Тип CSS свойства:
Текст