CSS Line comme arrière-plan avec du texte dessus avec un fond blanc

Question

Donc je sais que j'ai massacré le titre un peu mais si quelqu'un regarde ici http://grainandgram.com/theexchange/fivequestions-benrunkle/ à l'endroit où il dit «Cinq questions avec un artisan», vous comprendrez mieux. Fondamentalement, il a un div avec un fond, puis un div enveloppé à l'intérieur. La Div interne est définie pour être au milieu de la ligne et a un fond blanc. J'aimerais faire quelque chose de similaire mais centre-le. Mon problème quand je le centre bien que mes données sont dynamiques et je ne peux pas définir une largeur. Sans largeur, la div s'étend des deux côtés.

Existe-t-il un moyen de centrer le texte et de ne pas avoir une largeur et de ne pas étendre automatiquement le div à 100% de la largeur?

Voici le code HTML et 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; 
} 

Notez que si la largeur: partie est supprimée, la largeur de div devient 940px. Si je garde la largeur mais que je saisis du texte plus long que 225px, l'alignement est désactivé et n'est plus centré.

Des idées sur la façon d'autoriser le texte à être à l'intérieur de n'importe quelle longueur et de ne pas avoir le div sur toute la largeur?

Answer 1

un affichage: en ligne sur le div interne?

Answer 2

changement dans:

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