text-align: выравнивание текста в блоке

Назначение

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

Как это работает

start и end учитывают направление письма, а left и right привязаны к физическим сторонам. Свойство не центрирует сам блочный контейнер и не заменяет Flexbox или Grid.

Пример

<style>
.message{max-width:24rem;border:1px solid;padding:16px;text-align:center}
</style>
<div class="message"><h2>Готово</h2><p>Текст центрирован внутри ограниченного блока.</p></div>

Что должно получиться

Текст внутри рамки выровнен по центру, но рамка не обязана находиться по центру страницы. Для внешнего положения нужен отдельный приём раскладки.

Граница применения и частая ошибка

Выравнивание justify в узкой колонке может создавать большие пробелы между словами. Проверяйте реальный текст, а не одну короткую строку с ровным переносом.

Самостоятельная проверка

Поменяйте center на start, затем задайте контейнеру dir=rtl. Сравните поведение start и left; положение самого блока относительно страницы должно остаться прежним.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Каскад и специфичность
• Модель размеров
• Отладка стилей