title: How to horizontally center a span element inside an h1 tag?
body: <p>I currently have this markup:</p>
  
  <pre><code>&lt;h1 class="title" id="page-title"&gt;
      &lt;span id="page-title-inner"&gt;Home&lt;/span&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>h1#page-title { 
      background: transparent url(../images/line.png) 0px 6px no-repeat;
      overflow: hidden;
  }
  
  #page-title-inner { 
      width: auto; 
      float: left; 
      background: #fff; 
      padding: 0 15px; 
      position: relative; 
      left: 45%; 
  }
  </code></pre>
  
  <p>This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.</p>
  
  <p>What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.</p>
  
  <p>I have tried to do something like:</p>
  
  <pre><code>#page-title-inner { 
      width: auto; 
      float: left; 
      background: #fff; 
      margin: 0 auto;
      display: block;
  }
  </code></pre>
  
  <p>where the margin 0 auto value is what would center the span but I wonder why it doesn't work. </p>
  
  <p>Is there a better way and more efficient to achieve what I want to do?</p>