¿Cómo se alinean verticalmente las imágenes dentro de una lista o un div?

Question

tengo el siguiente código para mostrar algunas imágenes:

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;} 

Esto produce imágenes que se parecen:

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

Pero me gustaría que c introducir los logotipos verticalmente, de modo que parece:

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

He intentado alinear verticalmente todo a través de CSS, pero que en realidad no funciona a menos que esté utilizando una tabla. ¿De todos modos puedo obtener el efecto deseado sin usar una fila de tabla?

ACTUALIZA 1

Las imágenes que se producen pueden ser de diferentes alturas, por lo tanto no se puede utilizar un elemento css altura fija ...

Answer 1

¿Las imágenes tienen un límite superior fijo en cuanto a su altura ?

Si es así se puede establecer el line-height del div que contiene a esa altura, a continuación, establezca vertical-align propiedad de los img etiquetas para middle.

Ver aquí: http://phrogz.net/CSS/vertical-align/index.html

Answer 2

Añadir vertical-align: middle; a .footer-logos img:

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

Dicho esto, usted debe establecer un fijo width y height en cada una de las <img> elementos para evitar todo el asunto saltando durante página carga.

Answer 3

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;}