The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
Or, if you don’t want to have an extra element in modern browsers and don’t mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient Expression, that runs only once per element, so there won’t be any performance issues:
The solution with :before
and expression()
for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/
How it works:
- When you have two
inline-block
elements near each other, you can align each to other’s side, so withvertical-align: middle
you’ll get something like this: - When you have a block with fixed height (in
px
,em
or another absolute unit), you can set the height of inner blocks in%
. - So, adding one
inline-block
withheight: 100%
in a block with fixed height would align anotherinline-block
element in it (<img/>
in your case) vertically near it.