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

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

Краткий ответ: Нет, text-align: center не воздействует на сам блочный элемент (display: block), но воздействует на его текстовое содержимое и встроенные элементы внутри него.

Как работает text-align

text-align — это свойство, которое выравнивает содержимое элемента, а не сам элемент. Оно работает с:

• Текстом
• Встроенными элементами (display: inline, display: inline-block)
• Флексбоксом (в некоторых случаях)

/* Центрирует содержимое div, но не сам div */
div {
  display: block;
  text-align: center;
}

Пример 1: Текст и встроенные элементы

<div style="display: block; text-align: center; width: 300px; border: 1px solid;">
  Это текст будет центрирован
  <span>Это встроенный элемент тоже</span>
</div>

В этом случае текст и span будут выровнены по центру внутри div.

Пример 2: Блочный элемент внутри блочного

<div style="text-align: center;">
  <div style="display: block; width: 100px; background: blue;">Блок</div>
</div>

Внутренний div останется слева. text-align: center не сместит его, потому что это блочный элемент.

Как ПРАВИЛЬНО центрировать блочный элемент

Способ 1: margin: auto (классический)

div {
  display: block;
  width: 300px;
  margin: 0 auto; /* Центрирует по горизонтали */
}

Способ 2: Flexbox (современный)

parent {
  display: flex;
  justify-content: center; /* Центрирует содержимое */
}

Способ 3: CSS Grid

parent {
  display: grid;
  place-items: center; /* Центрирует как по вертикали, так и по горизонтали */
}

Ключевые отличия

Практическое применение

/* Правильно: центрируем содержимое кнопки */
button {
  display: block;
  text-align: center;
}

/* Правильно: центрируем сам элемент */
.container {
  width: 500px;
  margin: 0 auto;
  display: block;
}

Вывод

text-align: center на элементе с display: block воздействует только на текстовое содержимое и встроенные элементы внутри него. Для центрирования самого блочного элемента используй margin: 0 auto, flexbox или grid.