text-align
Свойство text-align определяет горизонтальное выравнивание текста в элементе.
| Значение по умолчанию: | left при направлении ltr, и right — rtl |
|---|---|
| Наследуется: | да |
| Версия: | CSS1 |
Аргументы
| Значение | Описание |
|---|---|
| left | Выравнивание по левому краю |
| right | Выравнивание по правому краю |
| center | Выравнивание по центру |
| justify | Выравнивание по ширине строки |
| inherit | Значение должно быть унаследовано от элемента родителя |
text — align
Выравниваем текст по левому или правому краю. А может быть по центру?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Подсказки
- На практике
- Андрей Резников советует
- Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Андрей Резников
Обновлено 15 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
text — align управляет выравниванием контента (к примеру текста) по горизонтали внутри родительского элемента.
Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега ), либо значением свойства direction ( ltr — слева направо, rtl — справа налево).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- start — выравнивание по тому краю, по которому принято в текущем языке (значение по умолчанию).
- end — по противоположному краю для текущего языка.
- left — по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по ширине. Текст растягивается от левого до правого края.
- match — parent — по значению direction родителя.
Значение, поддержка для которого в будущем будет расширена:
- justify — all — тоже самое, что justify , но включая последнюю строку.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение свойства наследуется.
�� Значение по умолчанию — start .
�� При разработке приложений с интернационализацией используйте start и end вместо left и right .
�� Выравнивание текста нельзя анимировать при помощи transition ☹️
�� В случае необходимости выравнивания последней строки используйте text — align — last , значения свойства совпадают с text — align .
На практике
Скопировать ссылку «На практике» Скопировано
Андрей Резников советует
Скопировать ссылку «Андрей Резников советует» Скопировано
�� Свойство text — align можно использовать для выравнивания изображений.
Один из вариантов выравнивания картинки по горизонтали:
- Убедиться, что родитель является блочным элементом ( display : block ).
- Применить свойство text — align к родителю.
div class="parent"> img alt=". " src=". " class="image" /> div>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center;>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center; >Открыть демо в новой вкладке + Развернуть
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
������div class="parent"> div class="child">��div> div class="child">��div> div class="child">��div> div>.parent width: 80%; margin: 0 auto; padding: 25px;> .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold;>.parent width: 80%; margin: 0 auto; padding: 25px; > .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; 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%; >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;Пример
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”:
Пример
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 Значение элемента наследуется от родительского элемента. Поддержка браузера
1.0+ 12.0+ 1.0+ 1.0+ ✓ Выравнивание текста в CSS: свойство text-align
В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:
Как необходимо выровнять текст? Подходящее значение По левому краю left По правому краю right По центру страницы/блока center По ширине страницы/блока justify Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю) start Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю) end Пример записи стиля:
Рекомендации по использованию стилей
Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине ( justify ) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .
На скриншотах показаны примеры использования различных значений для свойства CSS text-align: