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

Урок №9

Выравнивание текста — при работе с текстом такая необходимость возникает очень часто.
В CSS это реализуется с помощью соответствующих атрибутов и их значений. Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов.

По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента.

Что это за атрибуты, какие у них существуют значения и, наконец, как делается выравнивание текста в CSS с их помощью мы и рассмотрим в этом уроке.

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

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

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

Пример кода CSS:

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

Обратите внимание на примере кода HTML и 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>

Как это будет выглядеть на странице:

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

Текст по центру

Текст по левому краю

Текст по правому краю

Текст по ширине

В результате независимо от масштабирования окна, текст будет выравниваться согласно значению свойства text-align.

На этом уроке Вы познакомились с выравниванием текста в CSS. Следующий урок будет посвящён рамкам элемента CSS.

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

Создано: 01.06.2020.|Обновлено: 15.12.2022.