Как добавить цвет фона только к ширине центрированного текста?

Question

Я думаю, что это прямо, но я не смог понять, как это сделать. Я хотел бы центрировать некоторый текст в элементе div, а затем применить цвет фона только к ширине текста, не вводя ширину элемента div (чтобы цвет фона автоматически соответствовал ширине текста)

На данный момент мой CSS выглядит так:

.heading {
text-align: center;
background-color:red;
}

, который центрирует текст, но делает фон всей строки на странице красным.

Когда я добавляю display:inline, фон - это только ширина текста, но текст больше не центрируется.

Может ли кто-нибудь помочь с этим?

Спасибо

Ник

Answer 1

Оберните текст внутри .heading в span, а затем:

.heading {
  text-align: center;
}

.heading span {
  background-color:red;
}

Answer 2

Вы не сможете достичь этого только с одним DIV.Возможно, вам придется заключить текст в SPAN и применить к нему цвет фона.Например, HTML-код будет выглядеть так:

<div class="heading"><span>Sample Text</span></div>

А CSS-код будет выглядеть так:

DIV.heading { text-align: center; }
DIV.heading SPAN { background-color: red; }