title: CSS centering an inline element with background color
body: <p>I've been trying to get a block of text centered horizontally and vertically within a div of fixed height and width. I also want the text to have a semi transparent black background on it, and for it to be able to stretch onto 2 lines if possible.</p>
  
  <p>The problem I'm having is that the line is not being centered vertically, and the black background behind the text is doing strange things on the beginning of the new line.</p>
  
  <p>The code I've currently got is this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="description"&gt;
      &lt;span&gt;Welcome to the world of beautiful design, technology and music.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.description {
      width: 645px;
      height: 200px;
      margin: 0 auto;
      text-align: center;
  }
  div.description span {
      background: rgba(0, 0, 0, 0.5);
      color: #FFFFFF;
      font-size: 28px;
      line-height: 60px;
      padding: 10px;
  }
  </code></pre>
  
  <p>I'm looking to imitate this kind of look <a href="http://grab.by/fwNe" rel="nofollow">http://grab.by/fwNe</a> without having to use any strange javascript hacks to break it into 2 lines.</p>
  
  <p>Thanks,
  Charlie</p>