CSS text-align, примеры. Как сделать выравнивание текста в html

Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.

Синтаксис CSS text-align

...
text-align: center | justify | left | right | inherit;
...

Где:

center - выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
justify - растягивание текста по всей ширине области
left - выравнивание по левому краю
right - выравнивание по правому краю
inherit - принять значение предка (родителя)

Чаще всего эти свойства применяются в блоках <div> и абзацах <p>.

Примечание:
Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.

Как сделать выравнивание текста в html

Пример №1. Выравнивание текста по левому краю

Выравнивание текста по левому краю. Действуют по умолчанию.

<html>
<head>
<style>
	.align_left{
	border: 1px solid #aaa;
	background: #FFDEAD;
	padding: 3px;
	text-align: left;
	}
</style>
</head>
<body>
	<div class="align_left">Выравнивание текста по левому краю</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по левому краю

Пример №2. Выравнивание текста и картинки по центру

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

<html>
<head>
<style>
	.align_center{
	border: 1px solid #aaa;
	background: #FFDEAD;
	padding: 3px;
	text-align: center;
	}
</style>
</head>
<body>
	<div class="align_center">Выравнивание текста по центру</div>
	<div class="align_center"><img src="foto.jpg"></div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по левому краю

Пример №3. Выравнивание текста по правому краю

Выравнивание текста по правому краю.

<html>
<head>
<style>
	.align_right{
	border: 1px solid #aaa;
	background: #FFDEAD;
	padding: 3px;
	text-align: right;
	}
</style>
</head>
<body>
	<div class="align_right">Выравнивание текста по правому краю</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по правому краю

Пример №4. Выравнивание текста по ширине всей области

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

<html>
<head>
<style>
	.align_justify{
	border: 1px solid #aaa;
	background: #FFDEAD;
	padding: 3px;
	text-align: justify;
	}
</style>
</head>
<body>
	<div class="align_justify">Выравнивание текста по ширине всей области</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по ширине всей области

Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Примечание

Вместо свойства text-align можно также использовать атрибут align, который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

<div align="center">Выравнивание по центру</div>
<p align="justify">Выравнивание текста по ширине всей области</p>
<table align="right">
	<tr align="center">
		...
	</tr>
...
</table>

Разница в тегах <div> и <p> в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

← Перейти в каталог CSS уроков