Урок: выравнивание текста в css

AriCosmo · 3 Июл 2015

Всем привет!

В данном уроке Вашему вниманию предлагаю средства CSS, благодаря которым можно выравнивать текст. Для этого в CSS есть свойство text-align. Рассмотрим подробнее все четыре значения и пример работы выравнивания (в конце статьи).

Выравнивание текста в CSS
У свойства text-align имеется 4 стандартных значения:

right - выравнивание по правому краю.

center - выравнивание по левому краю.

left - выравнивание по левому краю.

justify - выравнивание по ширине. Для этого браузер создает пробелы между символами, что бы достичь этого результата.

Код CSS

HTML:

.text_center {
text-align: center; /* выравнивание по центру */
}
.text_left {
text-align: left; /* выравнивание по левому краю */
}

Пример выравнивания текста в CSS

Теперь перейдём к примеру, где рассмотрим действие выравнивания текста.

Код HTML и CSS

HTML:

<html>
<head>
<title>Пример выравнивания текста в CSS</title>
<style>
.text_center {
text-align: center; /* выравнивание по центру */
}
.text_left {
text-align: left; /* выравнивание по левому краю */
}
.text_right {
text-align: right; /* выравнивание по правому краю */
}
.text_justify {
text-align: justify; /* выравнивание по ширине */
}
</style>
</head>
<body>
<p class="text_center">Текст по центру</p>
<p class="text_left">Текст по левому краю</p>
<p class="text_right">Текст по правому краю</p>
<p class="text_justify">Текст по ширине</p>
</body>
</html>

Демонстрацию работы вы можете посмотреть >>тут<<
Исходник работы вы можете скачать >>тут<<
В результате независимо от масштабирования окна текст будет выравниваться согласно значению свойства text-align.
Спасибо за внимание!

Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину