title: CSS: Limit width of text background in position: absolute div?
body: <p>I have some text I want to center in the middle of a <code>div</code>. </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="inner"&gt;
          &lt;div class="text"&gt;
              this is some text
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to position several background images behind this text, so I have set the <code>div</code> wrapping the text to <code>position:absolute</code>. </p>
  
  <pre><code>.inner {
      position: absolute;
      margin-top: 90px;
      text-align: center;
      width: 300px;
  }
  </code></pre>
  
  <p>I also want that text to have padding and a background colour.</p>
  
  <pre><code>.text {
      padding: 10px 20px;
      color: #fff;
      background-color: #000;
  }
  </code></pre>
  
  <p>However, the text's background stretches the entire length of the container <code>div</code>.<br>
  Is there some way to centre the <code>.text</code> and set its width to be only as long as the text is?</p>
  
  <p>The only way I can do it currently is to remove the width of <code>.inner</code> and manually set a <code>margin-left</code> for <code>.text</code>, but my content is dynamic, so this won't work in the long term.</p>
  
  <p><a href="http://fiddle.jshell.net/3Ahs2/8/" rel="nofollow">JSFiddle here</a></p>