How do you vertically align images within a list or a div?

I have the following code for showing some images:

HTML:

<div class="footer-logos">
        <ul>
            <li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li>
            <li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>     
        </ul>
</div>

CSS:

.footer-logos {text-align:center;}
.footer-logos img {margin-left:20px;margin-right:20px;}
.footer-logos img.first {}
.footer-logos img.last {}
.footer-logos ul {}
.footer-logos ul li {display: inline; list-style:none;}

This produces images that look like:

alt text http://labs.dante-studios.com/footer-logos-normal.jpg

But i would like it to center the logos vertically so it looks like:

alt text http://labs.dante-studios.com/footer-logos-fixed.jpg

I've tried vertically aligning everything through CSS but that doesn't really work unless i'm using a table. So anyway i can get the desired effect witho开发者_如何学运维ut using a table row?

UPDATE 1

The images that are produced can be of different heights, thus cannot use a fixed height css element...

Do the images have a fixed upper bound as to their height?

If so you can set the line-height of the containing div to that height, and then set vertical-align property of the img tags to middle.

See here: http://phrogz.net/CSS/vertical-align/index.html

ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;}
li.bod {color: #502945; font: normal 13px/21x Tahoma; 
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px; 
background: url(components/bod_odrazka.png) left no-repeat;}

Add vertical-align: middle; to .footer-logos img:

.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}

That said, you should set a fixed width and height in each of the <img> elements to avoid the whole thing jumping up during page load.