如何將背景顏色添加到居中文本的寬度？

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中並將背景顏色應用於SPAN。例如HTML代碼如下：

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

和CSS代碼如下：

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