Свойство text-align в CSS используется для выравнивания внутреннего содержимого блочного элемента.
Значения text-align
Сначала традиционные значения для выравнивания текста в CSS:
- left – установлено по умолчанию. Контент выравнивается по левому краю.
- right – содержимое выравнивается по правому краю.
- center – центрирование контента между левым и правым краями. Пустое пространство слева и справа от каждой строки должно быть одинаковым.
- justify – содержимое размещается таким образом, чтобы первое слово в каждой строке выравнивалось по левому краю, а последнее слово в каждой строке – по правому краю. Это также называют в HTML выравниванием по ширине. Осуществляется за счет увеличения ширины пробелов в строках.
- inherit – значение будет тем же, что и у родительского элемента.
«Контент» и «Содержимое »используется здесь вместо «текст», потому что хотя в название свойства и есть слово text, оно влияет не только на текстовый контент, но и в той же мере на все встроенные ( inline или inline-block ) элементы в этом контейнере.
Learn CSS In Arabic 2021 — #18 — Text — Alignment
В CSS3 также есть два новых значения: start и end . Они упрощают поддержку нескольких языков. Хотя в большинстве языков письмо идет слева направо (ltr), но, например, в арабском языке письмо идет справа налево (rtl).
- start – то же самое, что left в ltr и right в rtl;
- end – то же, что right в ltr и left в rtl.
Значения start и end подстраиваются под направление текста, например, если текст идет слева направо, то start приравнивается к left , а end к right . И наоборот, когда расположение текста идет справа налево, то в качестве start будет считаться уже правая сторона, а end — левая. Это удобно, когда на сайте используются разные языки и нужно предусмотреть, что изменится направление письма.
Существует также значение match-parent , похожее на inherit , но может наследовать start и end и не учитывает значение свойства direction .
В спецификации есть несколько значений, которые пока не поддерживаются браузерами. Одно из них « start end », которое выравнивает первую строку, как если бы она была start , а любые последующие строки, как если бы они была end . Другое значение представляется в виде строки text-align: «.» start . Текст будет выровнен по первому вхождению этой строки «.» , что может использоваться, например, для выравнивания чисел с десятичной точкой.
Источник: websovet.pro
text-align¶
Свойство text-align задает горизонтальное выравнивание содержимого встроенного уровня внутри блочного элемента или поля ячейки таблицы.
Это означает, что он работает как vertical-align , но в горизонтальном направлении.
Демо¶
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис¶
/* Keyword values */ text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; /* Character-based alignment in a table column */ text-align: ‘.’; text-align: ‘.’ center; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: revert; text-align: revert-layer; text-align: unset;
Значения¶
How to align text center in html 5
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы.
Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой».
Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным».
Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.
Значение по-умолчанию: left
Применяется к блочным контейнерам
Спецификации¶
- CSS Logical Properties and Values Level 1
- CSS Text Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Поддержка браузерами¶
Описание и примеры¶
html> head> meta charset=»utf-8″ /> title>text-aligntitle> style> div border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ > #left text-align: left; > #right text-align: right; > #center text-align: center; > .content width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ > style> head> body> div id=»left»> div class=»content»>Выравнивание по левому краюdiv> div> div id=»center»> div class=»content»>Выравнивание по центруdiv> div> div id=»right»> div class=»content»> Выравнивание по правому краю div> div> body> html>
Источник: hcdev.ru
text — align
Выравниваем текст по левому или правому краю. А может быть по центру?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 16 мая 2023
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
text — align выравнивает текст по горизонтали внутри блока.
Если это свойство не задано, то текст выравнивается по левому краю.
Примеры
Скопировать ссылку на секцию «Примеры» Скопировано
p text-align: center;> p text-align: center; > Скопировать Скопировано Не удалось скопировать
Специальные значения для столбца в таблице:
p text-align: «.»; text-align: «.» center;> p text-align: «.»; text-align: «.» center; > Скопировать Скопировано Не удалось скопировать
Выравнивание блока (нестандартный синтаксис):
p text-align: -moz-center; text-align: -webkit-center;> p text-align: -moz-center; text-align: -webkit-center; > Скопировать Скопировано Не удалось скопировать
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
У text — align есть четыре варианта значений:
- center — выравнивание по центру.
- justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
- left — выравнивание по левому краю (значение по умолчанию).
- right — выравнивание по правому краю.
Не так давно появилось ещё два крайне удобных значения:
- start — текст выровнен по тому краю, по которому принято в текущем языке.
- end — текст выровнен по противоположному краю для текущего языка.
Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этом вам ничего не нужно будет изменять.
Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега . Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
Значение свойства наследуется.
Значение по умолчанию — left .
Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin со значением auto : например, margin : auto , margin : 0 auto , margin — left : auto; margin — right : auto .
Выравнивание текста нельзя анимировать при помощи transition ☹️
Ещё пример
Скопировать ссылку на секцию «Ещё пример» Скопировано
Вот сразу три варианта выравнивания текста внутри контейнера . В этом примере мы задаём выравнивание в CSS-стилях, привязывая их к классам left , right , center , так что в HTML остаётся только добавить элементу атрибут класса с нужным именем, вроде class = «left» :
Выравнивание по левому краю Выравнивание по центру Выравнивание по правому краю div class=»left»> div class=»content»>Выравнивание по левому краюdiv> div> div class=»center»> div class=»content»>Выравнивание по центруdiv> div> div class=»right»> div class=»content»>Выравнивание по правому краюdiv> div> Скопировать Скопировано Не удалось скопировать
.left text-align: left;> .right text-align: right;> .center text-align: center;> div border: 1px solid; padding: 15px;> .content /* Ширина вложенного контейнера */ width: 75%;> .left text-align: left; > .right text-align: right; > .center text-align: center; > div border: 1px solid; padding: 15px; > .content /* Ширина вложенного контейнера */ width: 75%; > Скопировать Скопировано Не удалось скопировать
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
1 2 3 div class=»parent»> div class=»child»>1div> div class=»child»>2div> div class=»child»>3div> div> Скопировать Скопировано Не удалось скопировать
.parent box-sizing: border-box; width: 80%; margin: 0 auto; padding: 25px;> .child box-sizing: border-box; display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 75px; font-weight: bold;> .parent box-sizing: border-box; width: 80%; margin: 0 auto; padding: 25px; > .child box-sizing: border-box; display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 75px; 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%; > Скопировать Скопировано Не удалось скопировать
Источник: doka.guide