title: Centered text with hr-like line on both sides, without using a table
body: <p>I need to create a headline with equal length lines on both sides of the headline text, and a fixed size padding between the lines and the text. The text will vary so it must not set a width. The lines should take up all remaining width available in the headline container. The headline text must not set a background because the background behind it will vary. Something like this:</p>
  
  <p>--------------------------------------------------------- Some text ---------------------------------------------------------</p>
  
  <p>I solved it using a table:</p>
  
  <pre><code>&lt;table width="100%"&gt;
    &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
    &lt;td style="width:1px; padding: 0 10px; white-space: nowrap;"&gt;Some text&lt;/td&gt;
    &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
  &lt;/table&gt;​
  </code></pre>
  
  <p>You can try it out here: <a href="http://jsfiddle.net/md2dF/3/" rel="noreferrer">http://jsfiddle.net/md2dF/3/</a></p>
  
  <p>Semantically this is a really bad solution, the headline has nothing to do with tabular data. How would you do this without a table? </p>
  
  <p>To summarize (because the suggested solutions have all overlooked one or more requirements):</p>
  
  <ul>
  <li>The headline must not have a fixed width</li>
  <li>The headline text must not have a background</li>
  <li>The headline text must not have a fixed width</li>
  <li>The lines on either side of the text must take up all remaining width</li>
  <li>The padding between the lines and the text must have a fixed width</li>
  <li>If in doubt, look at <a href="http://jsfiddle.net/md2dF/3/" rel="noreferrer">http://jsfiddle.net/md2dF/3/</a></li>
  </ul>