如何将背景颜色添加到居中文本的宽度？

Question

我认为这是直截了当的，但我还没有弄清楚如何做到这一点。我想将一些文本放在div中，然后将背景颜色应用于文本的宽度，而不必输入div的宽度（这样背景颜色自动为文本的宽度）

目前我的CSS看起来像这样：

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

以文本为中心，但会使页面上整行的背景变为红色。

当我添加display:inline时，背景只是文字的宽度，但文字不再居中。

有人可以帮忙吗？

谢谢，

尼克

Answer 1

将文字包裹在。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; }