html

codice:
<ul class='galleria-fotografica'>
[*]<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
[img]immagini-strutture/2_1thumb.jpg[/img]</a>

[*]<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
[img]immagini-strutture/2_2thumb.jpg[/img]</a>

[*]<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
[img]immagini-strutture/2_3thumb.jpg[/img]</a>

[*]<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
[img]immagini-strutture/2_4thumb.jpg[/img]</a>

[/list]
css
codice:
.galleria-fotografica
{
	width: 230px;
	height: 420px;
	float: left;
	margin: 0;
	padding-top: 60px;
	padding-left: 10px;
}

.galleria-fotografica a
{
	cursor: pointer;
}

.galleria-fotografica img
{
	background-color: white;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 80px;
	height: 60px;
}

.galleria-fotografica li
{
	background-color: white;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
        color: inherit;
	display: inline;
	float: left;
	margin: 10px;
	position: relative;
	cursor:  pointer;
}
come centrare l'immagine dentro l'elemento[*]? Il mio box li è di 80x60, e le immagini dentro sono più piccole, ma non sempre 80x60. Possono essere 80x40 o 45*60. Come centrarle sempre, indipendentemente dalle dimensioni? Col codice di sopra mi riempiono tutto il contenuto, sgranando l'immagine.

Forse dovrei usare i div invece della galleria con <ul> e[*]?