Question

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 fiddle for your convenience.

Here is the HTML:

<div id="legend">
    <img src="http://fate.holmes-cj.com/plus.png"/>
    <span> * 5</span>
</div>

Here are some of the things I’ve tried:

• span {vertical-align:middle;} seems to do nothing.
• span {vertical-align:top;} aligns the text to the top of the image. You would think that if top works, so would middle.
• span {vertical-align:20px;} gives me what I want, but it depends upon (and interacts with) the div height, the image height, and the font size.
• adding display:table-cell has been suggested elsewhere on SO, but seems to do nothing in Chrome.

You can see the problem in context at my Fate Dice Roller. 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.

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.

Answer 1

Here you go: http://jsfiddle.net/nYbwf/3/

Just vertical-align: middle on the image element, that way it will align vertically right in the middle instead of baseline.