Redimensionar varias imagenes en un div

[Cota_Isla]

Buenas,
estoy realizando una página web y en apartado galería de imágenes pongo 4 imágenes en un div. El problema me surge que como he realizado las imágenes se me redimensionan correctamente pero claro al asignarles un ancho especifico la altura puede ser menor de la asignada en el div, por lo que me gustaría centrarla verticalmente en el div. Comentar que dentro del div contenedor hay cuatro divs uno para cada imagen.
Adjunto el código a ver si alguien me puede ayudar.

Código HTML:

<div id="fila">
       <ul>
              <li>
                    <div>
                             <a href="../multimedia/imagenes/1.jpg" target="_blank"><img  src="../multimedia/imagenes/1.jpg"></a>
                    </div>
              </li>
              <li>
                     <div>
                             <a href="../multimedia/imagenes/2.jpg" target="_blank"><img src="../multimedia/imagenes/2.jpg"></a>
                     </div>
              </li>
              <li>
                      <div>
                               <a href="../multimedia/imagenes/3.jpg" target="_blank"><img src="../multimedia/imagenes/3.jpg"></a>
                       </div>
               </li>
                <li>
                       <div>
                                 <a href="../multimedia/imagenes/4.jpg" target="_blank"><img src="../multimedia/imagenes/4.jpg"></a>
                       </div>
                </li>
         </ul>
</div> 

Código:

#fila{
    width: 99%;
    height: 40%;
    margin-right: 0%;
    margin-left: 0%;
    margin-bottom: 1%;
    margin-top: 0%;
}
#fila div{
    float: left;
    text-align: center;
    width: 25%;
    height: 100%;
    margin: auto;
}
#fila img{
    width: 100%;
    height: auto;
}

[metacortex]

Hola, tienes muchas etiquetas ociosas allí. Intenta así:

Código HTML:

<ul id="fila">
    <li><a href="http://www.forosdelweb.com/f53/multimedia/imagenes/1.jpg" target="_blank"><img  src="http://www.forosdelweb.com/f53/multimedia/imagenes/1.jpg"></a></li>
    <li><a href="http://www.forosdelweb.com/f53/multimedia/imagenes/2.jpg" target="_blank"><img src="http://www.forosdelweb.com/f53/multimedia/imagenes/2.jpg"></a></li>
    <li><a href="http://www.forosdelweb.com/f53/multimedia/imagenes/3.jpg" target="_blank"><img src="http://www.forosdelweb.com/f53/multimedia/imagenes/3.jpg"></a></li>
    <li><a href="http://www.forosdelweb.com/f53/multimedia/imagenes/4.jpg" target="_blank"><img src="http://www.forosdelweb.com/f53/multimedia/imagenes/4.jpg"></a></li>
</ul>
 

La propiedad display: table-row y table-cell harán que tu lista adopte comportamiento de tabla, logrando lo que quieres:

Código CSS:

#fila {
display: table-row;
width: 100%;
}
 
#fila li {
display: table-cell;
vertical-align: middle;
text-align: center;
}
 

No he probado el código pero debería funcionar.

[pzin]

Realmente con que los elementos de la lista tengan esto:

Código CSS:

display: inline-block;
vertical-align: middle;
 

Te vale perfectamente: http://jsfiddle.net/2Lu9U

Lo que no sé es para que qué quieres div dentro de las listas. Igual te hacen falta para otra cosa, pero para alinear verticalmente desde luego que sobran.

[metacortex]

Mucho mejor la propuesta de pzin :)

[metacortex]

Eh... me fijé en esto:

Código CSS:

margin-left: -3px; /* resetear el espacio que crean los saltos de linea en HTML */
 

Con esto no se está reseteando; se está asignando un margen negativo que -dependiendo de la situación y del dispositivo- podría traer problemas más adelante.

Una posible solución sería colocar los elementos <li> uno al lado de otro (lo cual tampoco me parece, si tomamos en cuenta que CSS ofrece recursos para mostrar los elementos de manera apropiada y al mismo tiempo mantener nuestro código correctamente indentado).