text-align
Выравнивание текста и строчного содержимого внутри блока по горизонтали.
Синтаксис
text-align: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| left | keyword | По левому краю. |
| center | keyword | По центру. |
| right | keyword | По правому краю. |
| justify | keyword | По ширине — за счёт увеличения пробелов. |
| start | end | keyword | По началу или концу строки в направлении текста — удобно для языков с письмом справа налево. |
Примеры
Три вида выравнивания:
<p style="text-align: left;">Left</p>
<p style="text-align: center;">Center</p>
<p style="text-align: right;">Right</p>Строчные элементы, такие как кнопки и картинки, тоже слушаются text-align:
<div style="text-align: center; background: lavender; padding: 8px;">
<button>Inline content is centered too</button>
</div>Примечания
text-align выравнивает содержимое внутри блока, а не сам блок. Чтобы поставить блок по центру, используйте margin: 0 auto или flexbox. Текст по ширине на узком экране даёт большие дыры между словами.
См. также
- vertical-align — Выравнивание строчного элемента по вертикали внутри строки или содержимого в ячейке таблицы.
- justify-content — Распределяет элементы вдоль главной оси flex- или grid-контейнера.
- text-indent — Отступ первой строки блока.
Вопросы и ответы по теме
В учебнике
- Текст и шрифты — Шрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.