Vertical align all(!) elements in TD?

Question

I have a simple table with 1 TD with vertical-align:middle;. This TD contains an Image :

Answer 1

Question
Doesn't the vertical align of the TD should vertical align all its childs ?

NO.
When you apply vertical-align to td, it is only applied to td, and is not inherited by any of its children.

If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.

This is because of the way vertical-align for td works. The total height of the cell i.e td is calculated and the whole cell is aligned vertically.

If there is a single img, then the height of td is same as that of img, so it seems that vertical-align for img is also middle. But actually, the td is vertically aligned to the middle with the img as vertical-align : baseline

Same is the case when there is a single span.

but if i have both - it doesn't. why is that ?

Because now, the height of td is the combined height of both img + span. So, actually, td is vertically aligned in the middle, but not img and span.

How can I make the span to be centered as well ?

You need to apply this CSS :

td > * {
    vertical-align : middle;
}

This will apply the CSS to all the children.

Check the JSFiddle for a better picture.

Hope, this answers your question.