PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Воздействует ли text-align: center на элемент с display: block?

Основы CSS

text-align: center у блочного элемента центрирует его содержимое: текст и строчные элементы внутри. Сам блок при этом не сдвигается.

Пример

.box {
  width: 300px;
  text-align: center; /* текст внутри по центру */
}

Блок .box остаётся у левого края родителя, а строки текста внутри выравниваются по центру.

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

.box {
  width: 300px;
  margin: 0 auto;
}

Или через flex/grid у родителя.

Что ещё учесть

  • text-align наследуется: потомки тоже получат центрирование.
  • На вложенные блочные элементы оно действует только через их текст, а inline-block-элементы (кнопки, картинки) центрирует как обычные строчные.

Коротко для собеседования

Да, но только на содержимое: text-align: center выравнивает строки внутри блока; чтобы сдвинуть сам блок, нужен margin: 0 auto или flex.

Подробнее: MDN — text-align

Другие вопросы раздела