title: vertical-align: middle doesn't work
body: <p>The css property <code>vertical-align: middle</code> does not work in this example.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;span class='twoline'&gt;Two line text&lt;/span&gt;
    &lt;span class='float'&gt;  Float right  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.float {
      float: right;
  }
  
  .twoline {
      width: 50px;
      display: inline-block;
  }
  
  div {
      border: solid 1px blue;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>The <code>span</code> that is floating on the right is not vertically centered with respect to its containing <code>div</code>.  How can I have it vertically centered?</p>
  
  <p>The above code is in <a href="http://jsfiddle.net/e8ESb/1/">this fiddle</a>. </p>