Vertical align block level element inside a block level element

Question

I need to center align images (variable width and height) inside block level elements of fixed width and height. The css markup looks something like this:

&l         


        

Answer 1

Yes, vertical margins are calculated in a fundamentally different way to horizontal ones; ‘auto’ doesn't mean centering.

Setting ‘vertical-align: middle’ on the image elements sort of works, but it only aligns them relative to the line box they're currently on. To make the line box the same height as the float, set ‘line-height’ on the container:

You have to be in Standards Mode for this to work, because otherwise browsers render images-on-their-own as blocks instead of inline replaced elements in a text line box.

Unfortunately, IE (up to 7 at least) still keeps the block behaviour even in its attempt at a Standards Mode. There is a technical reason for this, namely that IE is pants.

To persuade IE that you really mean it about the images being part of a text line, you have to add some text inside the div — even a normal space will do it, but you could also try a zero-width-space:

​
​
​