title: vertical-align:middle for a span element
body: <p>I am trying to get the text in a span to align vertically in the middle relative to adjacent text. This is easily achieved, however when the text in the span takes up two lines, the text is cut-off. 
  To solve this problem the span either needs to expand in height when the text takes up two lines, or to somehow align the text to the middle.. </p>
  
  <p>A working example of the problem is here <a href="http://jsfiddle.net/BxLnN/" rel="nofollow">http://jsfiddle.net/BxLnN/</a></p>
  
  <p>Any suggestions or solutions would be greatly appreciated. </p>
  
  <p>The current dimensions of the containing elements must remain the same. </p>
  
  <p>Cheers! </p>
  
  <p>the html</p>
  
  <pre><code>&lt;div class="divisions_container"&gt;
      &lt;div class="division"&gt;
          &lt;div class="div_head"&gt;
              DIVISION 1 &lt;span&gt;SIX WINNING NUMBERS&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="div_head"&gt;
              DIVISION 2
              &lt;div&gt;
                  &lt;span&gt;FIVE WINNING NUMBERS PLUS ONE OF THE TWO SUPPLEMENTARY NUMBERS&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the css</p>
  
  <pre><code>/* division winnings */
  .divisions_container {
      font-size: 13px;
      padding: 0 10px;
      width: 7.4cm;
      height: 8.5cm;
  }
  .div_head {
      margin-top: 20px;
      text-align: left;
      padding-left: 5px;
      position: relative;
      background-color: #000;
      color: #fff;
      max-height: 6mm;
      font-weight: bold;
      font-size: 1.2em;
      }
  /* # winning numbers */
  .div_head span {
      font-size: 0.5em;
      vertical-align: middle;
      font-weight: 200;
      border: 1px solid red;
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      left: 100px;
  }
  </code></pre>