Help me, I'm vertically challenged.

[Cudabean]

This is a question about controlling vertical positioning within a DIV.

I've got a thin wide web page (just something that fits in an IFRAME) It looks like a strip of 35mm film, just so you know. I want to place four images that have been previously appropriately scaled side by side on the page. Although the images have been scaled so that their widths are exactly the same, their heights may differ. What I want to do is have the images center vertically. I have pre-defined four DIVs, one for each image:

<STYLE>
.image1 {position: absolute; top: 24px; left: 22px; width: 166px; height: 249; 
         vertical-align: middle; overflow: hidden;}
.image2 {position: absolute; top: 24px; left: 210px; width: 166px; height: 249; 
         vertical-align: middle; overflow: hidden;}
.image3 {position: absolute; top: 24px; left: 398px; width: 166px; height: 249; 
         vertical-align: middle; overflow: hidden;}
.image4 {position: absolute; top: 24px; left: 586px; width: 166px; height: 249; 
         vertical-align: middle; overflow: hidden;}
</STYLE>

<div class="image1"><img src='aaaa'></div>
<div class="image1"><img src='bbbb'></div>
<div class="image1"><img src='cccc'></div>
<div class="image1"><img src='dddd'></div>

For some reason when I display the page, the images appear at the top. I would have thought that the vertical-align: middle would have set whatever content in the middle. Any ideas on how I can vertically center these? &thanks.

cudabean