title: Problem vertically aligning text of an element that spans two lines
body: <p>I want to align some text in the middle of my element using CSS. This is my markup:</p>
  
  <pre><code>&lt;div id="testimonial"&gt;
      &lt;span class="quote"&gt;Some random text that spans two lines&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the relevant CSS:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#testimonial {
      background: url('images/testimonial.png') no-repeat;
      width: 898px;
      height: 138px;
      margin: 0 auto;
      margin-top: 10px;
      text-align: center;
      padding: 0px 30px 0px 30px;
  }
  
  .quote {
      font-size: 32px;
      font-family: "Times New Roman", Verdanna, Arial, sans-serif;
      vertical-align: middle;
      font-style: italic;
      color: #676767;
      text-shadow: 1px 1px #e7e7e7;
  }
  </code></pre>
  
  <p>Usually to get <code>.quote</code> in the vertical middle of <code>#testimonial</code>, I'd do:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.quote { line-height: 138px; }
  </code></pre>
  
  <p>But this breaks the layout because the text in <code>.quote</code> spans more than one line.</p>
  
  <p>As you can see I've tried doing <code>vertical-align: middle;</code> and that doesn't work either.</p>
  
  <p>Any help is appreciated. Cheers.</p>