Ciao,
sto cercando di inserire delle immagini di grandezza diversa (sia altezza che larghezza) in una lista, vorrei che si ridimensionassero automaticamente e che fossero centrate sia orizzontalmente che verticalmente al[*].

Ho fatto in questo modo:
codice:
CSS
#brands-content {
	width: 960px;
	height:380px;
	margin-top: 50px;
}

ul.brands li {
	display: inline-block;
	width: 100px;
	height: 100px;
	background: #ccc;
	margin: 5px;
	vertical-align: middle;
	text-align: center;
}

ul.brands li img {
	max-width: 100px;
	max-height: 100px;
}

HTML
<div id="brands-content">
   <ul class="brands">
	[*][img]images/brands/1.jpg[/img]
	[*][img]images/brands/2.jpg[/img]
	[*][img]images/brands/3.jpg[/img]
	[*][img]images/brands/4.jpg[/img]
	[*][img]images/brands/5.jpg[/img]
	[*][img]images/brands/6.jpg[/img][/list]
</div>
Le immagini si ridimensionano, ma purtroppo non vengono centrate al[*] verticalmente, ma solo orizzontalmente.
Cosa mi sono dimenticato o cosa ho sbagliato?
Mi date qualche suggerimento?
Grazie