Vertical-align middle with display table-cell not working on images

Question

I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ I created a fiddle aswell

Answer 1

Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).

So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)

If you really want to use tables for vertical-centering, here's the correct code: http://jsfiddle.net/WXLsY/

(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)

But there are other ways to do this (SO has many answers to this question, just use search)