http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div
How it works:
-
When you have two
inline-blockelements near each other, you can align each to other's side, so withvertical-align: middleyou'll get something like this:
-
When you have a block with fixed height (in
px,emor other absolute unit), you can set the height of inner blocks in%. - So, adding one
inline-blockwithheight: 100%in a block with fixed height would align anotherinline-blockelement in it (<img/>in your case) vertically near it.
div内部所有元素都添加vertical-align: middle; display:inline-block