Question

所以我知道我对这个标题进行了一些抨击，但如果有人在这里看http://grainandgram.com/theexchange/fivequestions-benrunkle/，那就说“工匠五问”你会更好理解。基本上他有一个背景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;
}

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

关于如何允许内部文本具有任何长度且没有div跨越整个宽度的任何想法？

Answer 1

显示：内部div的内联？

Answer 2

将其更改为：

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

作为背景的CSS线与在它的文本有白色背景

2 个答案: