title: Text inside a div should always be aligned to middle
body: <p>I've tried something, but vertical align doesn't work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="browseBuildsArea-pro"&gt;
      &lt;img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png"&gt;
      &lt;div class="build-poster"&gt;
          &lt;span class="middle-text"&gt;
              aaaaaaaaaaaa&lt;br&gt;
              bbbbbbbbbbbb&lt;br&gt;
              ccccccccccccc&lt;br&gt;
              dddddddddddd&lt;br&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.browseBuildsArea-pro {
      float: left;
      position: relative;
      width: 790px;
      height: 90px;
      background-image:url('http://revistaverzus.com/online/background.jpg');
      background-repeat:no-repeat;
  }
  div.browseBuildsArea-pro img.champion {
      float: left;
      display: block;
      height: 72px;
      margin-left: 14px;
      margin-top: 7px;
      border-radius: 9px;
      -moz-border-radius: 9px;
      -khtml-border-radius: 9px;
      -webkit-border-radius: 9px;
  }
  div.browseBuildsArea-pro div.build-poster {
      display: block;
      position: relative;
      margin-left: 150px;
      margin-top: 10px;
  }
  span.middle-text {
      vertical-align: middle;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sCWfS/1/" rel="nofollow">http://jsfiddle.net/sCWfS/1/</a></p>
  
  <p>How can I make the text align middle regardless of the length of the content?</p>