CSS線條作爲背景與文字與它的白色背景

所以我知道我屠殺了一下標題，但如果有人在這裏看到http://grainandgram.com/theexchange/fivequestions-benrunkle/它說''與工匠的五個問題'你會更好地理解。基本上他有一個帶背景的div，然後是一個div。 Div內部設置在線的中間並具有白色背景。我想要做一些類似的事情，但集中它。我的問題是，當我將它居中時，我的數據是動態的，我無法設置寬度。沒有寬度div延伸到雙方。CSS線條作爲背景與文字與它的白色背景

有沒有辦法居中文本，沒有寬度，沒有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。如果我保持寬度，但輸入的文本長度超過225px，則對齊關閉，不再居中。

關於如何讓文本里面的任何長度的任何想法，並沒有跨越整個寬度的div？

來源

2011-06-16 CogitoErgoSum

顯示：在內部div上內聯？

來源

2011-06-16 20:56:07 Achshar

這工作，如果我把一個頂-10px和相對位置吧。除非somoene可以給出更好的答案，否則我會將其標記爲正確的。 – CogitoErgoSum 2011-06-16 20:58:12

爲什麼職位相對？內部div中是否還有其他html？ – Achshar 2011-06-16 21:01:25

是我在更多測試顯示器上的錯：內聯工作完美。 – CogitoErgoSum 2011-06-16 21:04:23

更改成：

<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-16 21:04:26 joostschouten

CSS線條作爲背景與文字與它的白色背景

回答

相關問題