Как разместить текст в центре блока CSS

Для размещения текста в центре блока в CSS можно использовать свойство text-align со значением center для родительского элемента блока, а также свойство display со значением flex и свойство align-items со значением center для самого блока с текстом. Например:

HTML:

<div class="container">
 div class="text-block">
    <p>Текст в центре блока</p>
  </div>
</div>

CSS:

.container {
  text-align: center;
}

.text-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

В данном примере родительский элемент .container имеет свойство text-align: center, которое выравнивает содержимое по центру. Блок с текстом .text-block имеет свойство display: flex, которое позволяет использовать свойство align-items: center для выравнивания содержимого по вертикали и свойство justify-content: center для выравнивания содержимого по горизонтали.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как разместить текст в центре блока CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали