title: CSS: How to center text with surrounding borders
body: <p>I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start:  <a href="http://jsfiddle.net/gtspk/" rel="nofollow noreferrer">http://jsfiddle.net/gtspk/</a></p>
  
  <p><img src="https://i.stack.imgur.com/5mr4A.png" alt="enter image description here"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="line"&gt;
      &lt;h2&gt;Latest Track&lt;/h2&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
  .line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
  </code></pre>
  
  <p>The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?</p>
  
  <p>UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support:  <a href="http://jsfiddle.net/gtspk/3/" rel="nofollow noreferrer">http://jsfiddle.net/gtspk/3/</a></p>