2

所以我知道我有点扼杀了标题，但如果有人看这里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;
}

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

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

4

2 回答 2

1

显示：内部 div 上的内联？

于 2011-06-16T20:56:07.653 回答
0

将其更改为：

<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;
}
于 2011-06-16T21:04:26.630 回答