Исполняемые доки HTML: Текст по центру

Q: Как выровнять текст по центру в HTML?

Добавьте text-align: center элементу, который содержит текст, например или правило CSS вроде h1 { text-align: center; }. Оно центрирует каждую строку текста и строчное содержимое внутри этого элемента.

Q: Как отцентрировать текст по вертикали?

Сделайте контейнер flex-блоком: display: flex; align-items: center; (добавьте justify-content: center, чтобы центрировать и по горизонтали). Для одной строки в блоке фиксированной высоты подойдет и line-height, равный высоте.

Q: Тег еще работает?

Он устарел. и атрибут align="center" больше не входят в стандарт. Браузеры все еще отображают их ради старых страниц, но в новом коде нужно использовать text-align: center в CSS.

Q: Как сделать отступ текста в HTML?

Через CSS. text-indent: 2em дает отступ первой строки абзаца, а padding-inline-start: 2em или margin-inline-start: 2em сдвигает весь блок. Пробелы или в тексте не дают надежного отступа.

Как выровнять текст по центру в HTML

Задайте CSS-свойство text-align: center элементу, в котором находится текст:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

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

Ставьте его блоку, а не span

text-align работает у блочных контейнеров: <p>, <div>, заголовков, ячеек таблицы. У <span> или <a> оно ничего не делает, потому что строчный элемент шириной ровно со свой текст и центрировать внутри негде:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

Решение всегда одно: перенесите text-align: center в родительский блок.

Блок по центру, строки по левому краю

В абзаце из нескольких строк полностью отцентрированный текст трудно читать, потому что каждая строка начинается в другом месте. Распространенный прием: отцентрировать блок на странице, а его текст оставить выровненным по началу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto центрирует блок с заданной шириной, а text-align центрирует строки внутри него. Центрирование блоков (через flexbox, grid или margin) описано на странице как отцентрировать div.

Текст по центру по вертикали

text-align работает только по горизонтали. Чтобы отцентрировать текст по вертикали внутри блока, сделайте блок flex-контейнером:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center центрирует по вертикали, justify-content: center по горизонтали, а text-align: center по-прежнему центрирует строки относительно друг друга, если их несколько. Прием с line-height работает только для одной строки текста в блоке известной высоты.

Все значения text-align

Значение	Результат
`start` (по умолчанию)	Строки начинаются у начального края: слева в русском и английском, справа в арабском и иврите
`end`	Строки заканчиваются у конечного края
`center`	Строки по центру
`justify`	Строки растянуты до обоих краев (кроме последней)
`left`, `right`	Всегда слева или всегда справа, независимо от языка

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Предпочитайте start и end вместо left и right: они автоматически меняются местами в языках с письмом справа налево, как показывает последний блок.

Старый тег center

На старых страницах текст центрируют через <center> или атрибут align:

<center>Old way</center>
<p align="center">Also old</p>

Оба способа устарели. Браузеры все еще их отображают, чтобы старые сайты не ломались, но в современном HTML они некорректны и смешивают раскладку с разметкой. Используйте text-align: center в CSS.

Отступы в тексте

Тега для отступа в HTML нет, а набранные пробелы схлопываются (см. пробел в HTML). Отступы задает CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Отступ	CSS
Только первая строка	`text-indent: 2em`
Весь блок	`padding-inline-start: 2em` или `margin-inline-start: 2em`
Висячий (первая строка выступает)	`padding-inline-start: 2em; text-indent: -2em`

em привязывает отступ к размеру шрифта, поэтому он масштабируется вместе с текстом.

Частые ошибки

text-align у строчного элемента. Задайте его родительскому блоку.
Ожидание, что text-align отцентрирует блок. Оно центрирует текст и строчное содержимое, а не блок с шириной. Для блоков используйте margin-inline: auto или flexbox.
<center> или align="center". Устарели. Используйте CSS.
Длинные абзацы по центру. Центрируйте заголовки и короткие строки; основной текст выравнивайте по началу.
Отступы через   или пробелы. Используйте text-indent или padding.

Часто задаваемые вопросы

Как выровнять текст по центру в HTML?

Добавьте text-align: center элементу, который содержит текст, например <p style="text-align: center"> или правило CSS вроде h1 { text-align: center; }. Оно центрирует каждую строку текста и строчное содержимое внутри этого элемента.

Почему text-align: center не работает у span?

Span строчный, поэтому он шириной ровно со свой текст, и центрировать внутри него негде. Поставьте text-align: center родительскому блоку (<p> или <div> вокруг него) или сделайте span display: block.

Как отцентрировать текст по вертикали?

Сделайте контейнер flex-блоком: display: flex; align-items: center; (добавьте justify-content: center, чтобы центрировать и по горизонтали). Для одной строки в блоке фиксированной высоты подойдет и line-height, равный высоте.

Тег <center> еще работает?

Он устарел. <center> и атрибут align="center" больше не входят в стандарт. Браузеры все еще отображают их ради старых страниц, но в новом коде нужно использовать text-align: center в CSS.

Как сделать отступ текста в HTML?

Через CSS. text-indent: 2em дает отступ первой строки абзаца, а padding-inline-start: 2em или margin-inline-start: 2em сдвигает весь блок. Пробелы или   в тексте не дают надежного отступа.

Связанные концепции