Html CSS线条作为背景，上面有白色背景的文本

所以我知道我有点歪曲了这个标题，但如果有人看到这里写着“工匠的五个问题”，你会更好地理解。基本上，他有一个有背景的div，然后是一个包裹在里面的div。DIV内部设置为行的中间，并且具有白色背景。我想做一些类似的事情，但要居中。当我将数据居中时，我的问题是我的数据是动态的，我无法设置宽度。没有宽度时，div向两侧延伸

有没有一种方法可以使文本居中，并且没有宽度，并且div不会自动扩展到宽度的100%呢

下面是HTML和CSS

<div class="grid_24" id="section">
<div class="section_fivequestions">Five Questions With A Craftsman</div>
</div>

#section {
height: 2px;
background-color: #BCA474;
margin-bottom: 20px;
margin-top: 40px;
width:940px;
text-align:center;
}


.section_fivequestions {
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
line-height: 3px;
background-color: white;
color: #BCA474;
width: 225px;
margin: auto;
}

与工匠的五个问题
#部分{
高度：2倍；
背景色：#BCA474；
边缘底部：20px；
边缘顶端：40px；
宽度：940px；
文本对齐：居中；
}
.第五节问题{
字体大小：粗体；
文本转换：大写；
字体大小：10px；
线高：3倍；
背景色：白色；
颜色：#BCA474；
宽度：225px；
保证金：自动；
}

注意：如果删除了width:部分，div的宽度将变为940px。如果我保持宽度，但输入的文本长度超过225px，则对齐将关闭且不再居中

---

关于如何允许内部文本具有任意长度且不使div跨越整个宽度，您有什么想法吗？

a显示：内部div上的内联？

将其更改为：

<div class="grid_24" id="section">
<div class="section_fivequestions"><span class="sectionHeaderSpan">Five Questions With A Craftsman</span></div>
</div>

.sectionHeaderSpan{
   background-color:#FFF;
}

#section {
height: 2px;
background-color: #BCA474;
margin-bottom: 20px;
margin-top: 40px;
width:940px;
text-align:center;
}


.section_fivequestions {
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
line-height: 3px;
color: #BCA474;
margin: auto;
}

与工匠的五个问题
.科长span{
背景色：#FFF；
}
#部分{
高度：2倍；
背景色：#BCA474；
边缘底部：20px；
边缘顶端：40px；
宽度：940px；
文本对齐：居中；
}
.第五节问题{
字体大小：粗体；
文本转换：大写；
字体大小：10px；
线高：3倍；
颜色：#BCA474；
保证金：自动；
}

如果我放置一个top-10px并将其定位在相对位置，则此操作有效。除非somoene能给出一个更好的答案，否则我会把这个标记为正确答案。为什么是相对位置？在内部分区中是否有其他html？是我的错吗？更多的测试显示：inline工作得很好。如果希望在内部分区中添加白色背景，您可以始终添加填充…）