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

Question

Hiya,

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:

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

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 without using a table row?

UPDATE 1

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

Answer 1

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

Answer 2

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.