CSS :: Свойство text-align

css-свойство text-align (от англ. text align – выравнивание текста) используется для горизонтального выравнивания строчного содержимого блочных элементов.

Характеристики

Значение по умолчанию: left.
Применяется: к блочным элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.textAlign="value".

Синтаксис

Значения

left – текст будет выравниваться по левому краю.
right – текст будет выравниваться по правому краю.
center – текст будет выравниваться по центру.
justify – текст будет растягиваться на всю ширину родительского элемента.
start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-text-align

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/text-align

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		margin: 3em;
		}
				
		.p_1{
		text-align: right;
		background-color: yellow;
		}
		
		.p_2{
		text-align: center;
		background-color: blue;
		}
		
		.p_3{
		text-align: justify;
		background-color: green;
		}
		
	</style>
	
</head>
<body>
	
	<p class="p_1">
		text-align: right;<br>
		Текст выравнивается по правому краю.<br>
	</p>
	
	<p class="p_2">
		text-align: center;<br>
		Текст выравнивается по центру.<br>
	</p>
	
	<p class="p_3">
		text-align: justify;
		Текст растягивается по ширине абзаца. 
		Чтобы эффект был виден, первое предложение 
		должно быть длинее, чем ширина абзаца.
	</p>
	
</body>
</html>

Пример №1