"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




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


папка digest

Урок №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

 



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