title: Create vertically centered horizontal line to fill width of title with padding in CSS
body: <p>I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:</p>
  
  <p><strong>----- Alpha - Beta - Gamma -----</strong></p>
  
  <p>This is what I have so far:  </p>
  
  <p><a href="http://jsfiddle.net/WkZkt/" rel="nofollow">JSfiddle</a></p>
  
  <p>Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).</p>
  
  <p><a href="http://jsfiddle.net/WkZkt/1/" rel="nofollow">JSfiddle</a></p>
  
  <p>So what I need to do is basically fix the first version to work like the second version but without using a background.</p>
  
  <p>I thought of doing something like:</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
    &lt;div class="line-text"&gt;Some&lt;/div&gt;
    &lt;div class="line-gap"&gt;&lt;/div&gt;
    &lt;div class="line-text"&gt;Text&lt;/div&gt;
    &lt;div class="line-gap"&gt;&lt;/div&gt;
    &lt;div class="line-text"&gt;In a Line&lt;/div&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where <strong>.line</strong> would be an auto width (to fill the left and right sides) and <strong>.line-gap</strong> would just be say 10px to show the line between the text.</p>
  
  <p><strong>EDIT/UPDATE</strong></p>
  
  <p>Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...</p>
  
  <p><a href="http://jsfiddle.net/qMug3/" rel="nofollow">JSfiddle</a></p>