аватар |

Уроки / CSS /

Урок 5. Выравнивание текста в CSS

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

Выравнивание текста в CSS


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

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

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

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

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

Код CSS

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


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


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

Код HTML и CSS

<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.

Спасибо за внимание!
 



Распечатать
Похожие статьи
04 марта 2015 19:06 Урок 11. Позиционирование в CSS
07 июля 2013 13:18 Урок 2. Селекторы и правила CSS
19 мая 2014 17:42 Урок 7. Рамка элемента CSS
02 марта 2015 18:30 Урок 10. Плавающие элементы
13 мая 2014 16:19 Урок 6. Отступы и поля в CSS. Что такое margin и padding?


Комментарии к статье (vk.com)