text-align
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.
Try it
Syntax
The text-align property is specified in one of the following ways:
- Using the keyword values start , end , left , right , center , justify , justify-all , or match-parent .
- Using a <string> value only, in which case the other value defaults to right .
- Using both a keyword value and a <string> value.
Values
The same as left if direction is left-to-right and right if direction is right-to-left.
The same as right if direction is left-to-right and left if direction is right-to-left.
The inline contents are aligned to the left edge of the line box.
The inline contents are aligned to the right edge of the line box.
The inline contents are centered within the line box.
The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
Same as justify , but also forces the last line to be justified.
Similar to inherit , but the values start and end are calculated according to the parent’s direction and are replaced by the appropriate left or right value.
When applied to a table cell, specifies the alignment character around which the cell’s contents will align.
Accessibility concerns
The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.
text on left and right side of element
Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?
Thus ending up with the following layout:
The container has a fixed width, so I don’t want to use positioning, because I know I don’t have to.
2 Answers 2
(1) Add two divs within the element that contain each text string
(2) Float the two divs next to each other
(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).
You can place your two items inside the same container and float them into the right position.
text — align
text — align выравнивает текст по горизонтали внутри блока.
Если это свойство не задано, то текст выравнивается по левому краю.
Примеры
Скопировать ссылку на секцию «Примеры» Скопировано
Специальные значения для столбца в таблице:
Выравнивание блока (нестандартный синтаксис):
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
У text — align есть четыре варианта значений:
- center — выравнивание по центру.
- justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
- left — выравнивание по левому краю (значение по умолчанию).
- right — выравнивание по правому краю.
Не так давно появилось ещё два крайне удобных значения:
- start — текст выровнен по тому краю, по которому принято в текущем языке.
- end — текст выровнен по противоположному краю для текущего языка.
Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этом вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега <html> . Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Значение свойства наследуется.
�� Значение по умолчанию — left .
�� Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin со значением auto : например, margin : auto , margin : 0 auto , margin — left : auto margin — right : auto .
�� Выравнивание текста нельзя анимировать при помощи transition ☹️
Ещё пример
Скопировать ссылку на секцию «Ещё пример» Скопировано
Вот сразу три варианта выравнивания текста внутри контейнера <div> . В этом примере мы задаём выравнивание в CSS-стилях, привязывая их к классам left , right , center , так что в HTML остаётся только добавить элементу атрибут класса с нужным именем, вроде class = «left» :
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
Добавим элементу .parent свойство text — align : center и элементы .child выровняются по центру родителя:
А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text — align : justify ?
Ожидаемого поведения не получилось, и вот почему ��
�� У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.
CSS: Выравнивание текста
По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
- left — выравнивает текст по левому краю.
- right — выравнивает текст по правому краю.
- center — выравнивает текст по центру.
- justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.