Как сделать текст по центру в HTML? - коротко
Для центрирования текста применяйте CSS‑правило text-align: center; к нужному блоку (например, к <p> или <div>). В старом HTML можно использовать атрибут align="center" непосредственно в теге.
Как сделать текст по центру в HTML? - развернуто
Текст в веб‑странице удобно выравнивать по центру с помощью CSS, потому что это даёт полный контроль над внешним видом и сохраняет семантику разметки. Наиболее простым способом является свойство text-align. Достаточно задать его для блока‑родителя, в котором находится нужный тект:
<div style="text-align:center;">
Пример выровненного по центру текста
</div>Если нужно центрировать отдельный абзац, достаточно добавить класс и оформить его в отдельном файле стилей:
<p class="centered">Текст, выровненный по центру</p>.centered {
text-align: center;
}Для более сложных макетов, когда необходимо выровнять не только строковый контент, а целый блок, используют гибкие модели расположения. Один из самых популярных вариантов — Flexbox:
<div class="flex-container">
<div class="content">
Текст внутри блока
</div>
</div>.flex-container {
display: flex; /* активируем гибкую модель */
justify-content: center; /* горизонтальное центрирование */
align-items: center; /* вертикальное центрирование (при необходимости) */
height: 200px; /* задаём высоту контейнера */
}Если требуется разместить элемент ровно посередине как по горизонтали, так и по вертикали, удобно применять CSS‑свойство margin: auto совместно с фиксированными размерами:
<div class="box">
Текст в центральном блоке
</div>.box {
width: 300px;
margin: 0 auto; /* отступы слева и справа автоматически распределяются */
}Для выравнивания текста в таблицах или ячейках используют атрибуты таблицы, но современный подход всё равно подразумевает применение CSS:
td {
text-align: center; /* горизонтальное центрирование */
vertical-align: middle; /* вертикальное центрирование */
}Сеточная модель CSS Grid также предоставляет мощные средства центрирования:
<div class="grid">
<div class="item">Текст в сетке</div>
</div>.grid {
display: grid;
place-items: center; /* комбинирует justify-items и align-items */
height: 150px;
}Кратко о практических рекомендациях:
- Для простого выравнивания строк используйте
text-align: center;. - При необходимости центрировать блок полностью, выбирайте Flexbox или Grid.
- Избегайте устаревшего тега
<center>, он не поддерживается в современных стандартах. - Старайтесь отделять стили от разметки: помещайте CSS в отдельный файл или в секцию
<style>, а в HTML добавляйте только семантические классы. - Если элемент имеет фиксированную ширину,
margin: 0 auto;быстро решит задачу.
Эти методы охватывают большинство сценариев, от простых абзацев до сложных макетов, и позволяют добиться точного центрирования текста в любой HTML‑странице.