title: CSS Line as background with text over it with white background
body: <p>So I know I butchered the title a bit but if someone looks here <a href="http://grainandgram.com/theexchange/fivequestions-benrunkle/" rel="nofollow">http://grainandgram.com/theexchange/fivequestions-benrunkle/</a> at where it says 'Five Question With a Craftsman' you'll understand better. Basically he has a div with a background and then a div wrapped inside. The Div inside is set to be in the middle of the line and has a white background. I'd like to do something similar but center it. My problem when I center it htough is my data is dynamic and I cannot set a width. With no width the div extends out to both sides.</p>
  
  <p>Is there a way to center the text and not have a width and not have the div automatically expand to a 100% of the width?</p>
  
  <p>Below is the HTML and CSS.</p>
  
  <pre><code>&lt;div class="grid_24" id="section"&gt;
  &lt;div class="section_fivequestions"&gt;Five Questions With A Craftsman&lt;/div&gt;
  &lt;/div&gt;
  
  #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;
  }
  </code></pre>
  
  <p>Note if the width: portion is removed the div's width becomes 940px. If I keep the width but enter text longer than 225px the alignment is off and no longer centered.</p>
  
  <p>Any ideas on how to allow the text inside to be of any length and not have the div span the entire width?</p>