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

Question

我想这很简单，但我一直无法弄清楚如何做到这一点。我想将一些文本放在 div 中居中，然后将背景颜色应用于文本的宽度，而不必输入 div 的宽度（以便背景颜色自动为文本的宽度

）我的 CSS 看起来像这样：

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

它使文本居中，但使页面上整行的背景变为红色。

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

有人可以帮忙解决这个问题吗？

谢谢，

尼克

Answer 1

将文本包裹在 .heading 内，然后：

.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; }