How do I set correctly vertical align middle on image

Example I have set the master div with 100px the height. In the div have one logo which I want it to be vertical-align:middle;开发者_开发技巧

Here an example http://jsfiddle.net/c7Me7/

I want the logo will be auto align to middle without have a padding or margin.

Output should be like

Let me know

UPDATED: This works.

#top { height:100px; background:#000; padding:0 20px;line-height:100px;}
#logo img {vertical-align: middle;}

see - http://jsbin.com/utuye5/2

Please take a look at this page, it advices on several ways to solve this.

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

http://jsfiddle.net/c7Me7/7/

use text-align:center

#top { height:100px; background:#000; padding:0 20px;position:relative}
#logo {position:absolute;top:30% }

Try this top can be adjusted as per need

Thanks, Amit