vertical-align: middle issues

Can anyone tell why this doesn't work? http://www.webdevout.net/test?01x afai开发者_StackOverflowk it should; my <div> elements should all be block-level so anything in #container > div should be in the middle of the #container div (with the orange outline), right?

The style vertical-align only applies to table cells, images and span tags.

use display: table on your container and then you can use vertical-align on your inner display: inline-block elements.

Working demo http://jsfiddle.net/uzcrt/