title: CSS vertical text alignment
body: <p>I have a div, which contains an image and a span.  I would like the text in the span to be middle-aligned with the image.  Naturally, I made a <strong><a href="http://jsfiddle.net/nYbwf/">fiddle</a></strong> for your convenience.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="legend"&gt;
      &lt;img src="http://fate.holmes-cj.com/plus.png"/&gt;
      &lt;span&gt; * 5&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here are some of the things I've tried:</p>
  
  <ul>
  <li><code>span {vertical-align:middle;}</code> seems to do nothing.</li>
  <li><code>span {vertical-align:top;}</code> aligns the text to the top of the image.  You would think that if <code>top</code> works, so would <code>middle</code>.</li>
  <li><code>span {vertical-align:20px;}</code> gives me what I want, but it depends upon (and interacts with) the div height, the image height, and the font size.  </li>
  <li>adding <code>display:table-cell</code> has been suggested elsewhere on SO, but seems to do nothing in Chrome.</li>
  </ul>
  
  <p>You can see the problem in context at my <a href="http://fate.holmes-cj.com/">Fate Dice Roller</a>.  Click on "roll" a few times, and then mouse over the histogram.  You get some neat stats on your dice rolls, but the text portion is misaligned.</p>
  
  <p>Am I just out of luck here, or is vertical alignment really supposed to be this messy? I would love a solution that doesn't have to be tweaked when I change the font size.</p>