<img> in <div> won't vertical-align:middle, why?

Question

we have CSS:

#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}

#left img, #right img{float:center; vertical-align:middle;cursor:pointer}

Image is horizotal centered, but gets top aligned (i want middle)

html looks like

<div id="media">
    <div id="left"><img/></div> <div id="right"><img/></div>
</div>

Any idea what i'm doing wrong?

By the way, all this problem it's because i'm displaying images with different resolutions :S

EDIT

This didn't help... :(

#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}

#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}

Solution

you can vertical align an image in a div that has no text in it by setting line-height on the on the div. example:

<div style="height: 100px; line-height: 100px;">
    <img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>