Centrer verticalement une image dans une liste

Bonjour à tous,

Après avoir effectué des recherches sur le sujet, je n'ai pas trouvé de solution à mon problème, d'où mon post d'aujourd'hui, je vais donc vous expliquer ce qu'il se passe.

J'ai une page qui affiche une liste de miniatures (photo, bloc <img />) via une balise de liste (<ul>). Les listes <li> ont un affichage en block et en float, elles ont aussi une taille. Le problème est que les photos qui sont affichées sont soient au format paysage, soit au format portrait (avec un petit texte en dessous).

J'ai réussi à avoir un affichage correct, comme vous pouvez le voir sur cette capture :

http://comte.yannick.free.fr/dev/image.png

Ce que j'aimerais réussir à faire maintenant c'est centrer verticalement et horizontalement ces images (surtout verticalement dans le cas d'une image en format portrait). Mais après avoir tenter plusieurs choses (comme display: table) je ne suis pas arrivé à grand chose.

Mon code à cette forme :

<ul id="sortable">
  <li><div class="media_item"><img src="..." alt="..." /></div></li>
  <li><div class="media_item"><img src="..." alt="..." /></div></li>
  <etc />
</ul>

et niveau css voilà ce que j'ai fais pour l'instant :

.widgetContainerTab.photosTabsContainer #sortable li {
  display: block;
  margin: 0px 0px 0px 5px;
  padding: 0px 7px 10px 7px;
  float: left;
  width: 133px;
  height: 170px;
  text-align: center;
}

Auriez vous une idée, une méthode pour centrer ces images ?

Avant j'utilisais une balise table pour réaliser cet affichage, mais je suis passé aux listes pour pouvoir réaliser un tri.

En vous remerciant par avance

Yann.