CSS · справочник
Свойство text-align
text-align выравнивает строковое содержимое внутри блока: текст, inline-элементы и inline-block. Сам блочный контейнер это свойство не перемещает.
Основные значения
start и end учитывают направление языка, поэтому удобнее left и right в многоязычном интерфейсе. Center хорошо работает для коротких заголовков, но ухудшает чтение длинного текста.
.article { text-align: start; }
.hero__title { text-align: center; }
.price { text-align: end; }Что не делает text-align
Чтобы центрировать блок с заданной шириной, используют margin-inline: auto. Для расположения нескольких блоков подходят Flexbox и Grid.
.container {
max-width: 1080px;
margin-inline: auto;
}Частые ошибки
- Центрировать длинную статью.
- Ожидать перемещения блочного div.
- Justify в узкой колонке.
- Правое выравнивание обычного русского текста.
Практика
Сравни один абзац с start, center и justify. Затем отдельно центрируй контейнер через margin-inline.