На этой странице

CSS Горизонтальное выравнивание текста


С помощью свойства text-align можно равнять текст внутри блока.

Свойство может принимать следующие значения.

сenter – Текст выравнивается по центру блока.

<p style="text-align: center">Абзац с выравниванием по центру</p>

left – Текст выравнивается по левому краю блока .

<p style="text-align: left">Абзац с выравниванием по левому краю</p>

right – Текст выравнивается по правому краю блока .

<p style="text-align: right">Абзац с выравниванием по правому краю</p>

justify – Текст выравнивается по ширине с одинаковым интервалом от правого и левого края блока , происходит растягивание текста за счет пробелов.

<p style="text-align: justify">Абзац с выравниванием по ширине.</p>

Абсолютная и относительная величина в единицах CSS.

p { font-size: 12pt; color: red; font-family: "Arial";
    line-height: 5mm }

Пример:


<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Горизонтальное выравнивание текста</title>
	<style>
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 { 
   color: blue; 
}
p    {
    font-size: 14pt;
}
</style>
  </head>
  <body>
    <h1>Горизонтальное выравнивание текста</h1>
    <p style="text-align: center">Абзац с выравниванием по центру</p>
    <p style="text-align: left">Абзац с выравниванием по левому краю</p>
    <p style="text-align: right">Абзац с выравниванием по правому краю</p>
    <p style="text-align: justify">Текст выравнивается по ширине с одинаковым  интервалом от правого и левого края блока , происходит растягивание текста за счет пробелов.</p>
  </body>
</html>

Открыть пример в новом окне

Горизонтальное выравнивание текста


Горизонтальное выравнивание текста
Горизонтальное выравнивание текста

Рекомендуемые материалы: