Alignement vertical de vignettes

Bonjour.

Une galerie de photos est disposée sur trois colonnes. Au gauche et à droite, 5 vignettes alignées verticalement, au milieu, le titre, une image et une description.
Le formatage est correct, sauf pour les vignettes (150 x 100 px ou 100 x 150 px), qui sont chacune disposées dans un carré (class thumb) de 150 x 150 px. Celles en mode portrait ne posent pas de problème particulier, mais celles en mode paysage sont alignées en haut alors que je les voudrais au milieu.
J'ai essayé avec un vertical-align: middle; comme classe supplémentaire dans le <img> mais ça ne fonctionne pas.
J'ai essayé aussi de rajouter ça :

.thumb img {
	vertical-align: middle;
}

Mais ça ne marche pas non plus...

Le CSS

div#left {
	float: left;
	width: 150px;
	height: 800px;
	margin-right: 10px;
	padding: 10px 0;
	text-align: center;
}

div#right {
	float: right;
	width: 150px;
	height: 800px;
	margin-left: 10px;
	padding: 10px 0;
	text-align: center;
}

div#center {
	height: 800px;
	padding: 10px 0;
	text-align: center;
	overflow: hidden;
}

.thumb {
	border: 1px solid #D2D2D2;
	width: 150px;
	height: 150px;
	margin-bottom: 10px;
}

Le HTML

<div id="content">
	<div id="left">
		<div class="thumb"><a href="photo_01.jpg"><img src="photo_01_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_02.jpg"><img src="photo_02_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_03.jpg"><img src="photo_03_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_04.jpg"><img src="photo_04_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_05.jpg"><img src="photo_05_th.jpg" alt="" /></a></div>
	</div>
	<div id="right">
		<div class="thumb"><a href="photo_06.jpg"><img src="photo_06_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_07.jpg"><img src="photo_07_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_08.jpg"><img src="photo_08_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_09.jpg"><img src="photo_09_th.jpg" alt="" /></a></div>
		<div class="thumb"><a href="photo_10.jpg"><img src="photo_10_th.jpg" alt="" /></a></div>
	</div>
	<div id="center">
		<h1>Titre</h1>
		<img src="photo.jpg" width="300" height="450" class="photo" alt="" />				
		<p class="center">Description de la galerie...</p>
	</div>
</div>

Bonjour.
Ca n'est plus vraiment une surprise maintenant : centrer verticalement un objet n'est aussi facile que de le centrer horizontalement. Pour faire simple : c'est compliqué. Disons qu'il existe bien des manières de le faire, notamment via display: table-cell; qui permet de gérer la div comme une case de tableau, mais elle n'est évidemment pas supportée par tous les navigateurs. Si tes images en paysage ont toutes la même hauteur (ce dont je doute, mais bon) tu peux utiliser les marges pour les décaler vers le bas.

Après, une autre technique que j'utilisais dans ce genre de cas, mais qui n'a rien à voir avec du CSS puisque c'était du PHP, c'était de créer des miniatures pour mes images : par exemple je m'arrangeais pour créer des miniatures de 150x150, en redimensionnant la plus petite dimension (hauteur ou largeur) à 150px, et en conservant l'échelle, puis je tronquais ce qui dépassais, en centrant l'image.

J'ai bien pensé à ce que tu proposes, mais l'ordre portrait/paysage est aléatoire et comme il y aura beaucoup de photos, ça va être très rébarbatif d'ajouter un padding dans les vignettes correspondantes.
Pareil pour ta seconde option : les vignettes recadrées au carré. Faut que ça reste propre, aucune photo n'a la partie principale au même endroit, un script de recadrage n'est donc pas adapté.

En fait, j'avais suivi ce tutoriel de Florent V qui utilise le vertical-align :

http://covertprestige.info/css/centrer-image

Mais quelque chose ne marche pas, ou alors c'est différent...

Bon, je crois que j'ai trouvé. En suivant le tutoriel, dans la classe thumb, j'ai rajouté line-height: 150px; et bien que je ne saisisse pas le pourquoi du comment, ça fonctionne...