Свойство text-align

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | start | end;
Значение Описание
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы произвести это действие, браузер в этом случае добавляет пробелы между словами.
left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остаётся aquo;рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
start Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .example {
 text-align: right;
 }
 </style>
 
 <div class='example'>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus,
 officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate
 ipsa nemo asperiores deleniti cumque quisquam.
 </p>
 </div>
</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

Читайте также

Свойство vertical-align

Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки табл...

Свойство grid-template-rows

Определяет строки сетки с помощью списка значений разделённого пробелами. Значения представляют и...

Свойство animation

Используется для создания анимации.<br>Сокращенная запись для свойств animation-name, anima...

Функция var()

Функция <span class='samp'>var()</span> позволяет вставлять значения п...

Свойство line-clamp

Ограничивает текст заданным числом строк. При превышении текста указанным числом строк, он обреза...