Float left + centrar

[T_O_N_N_Y]

Buenos días.

Cómo podría conseguir que si tengo:

Código HTML:

<ul>
<li>
      <a href="dirección1" class="otras-mascotas_foto" style="background:#83ace9 url('direccióndelafoto1.gif') no-repeat center center;" title="Ver la mascota"></a>
      <a href="dirección2" class="otras-mascotas_foto" style="background:#83ace9 url('direccióndelafoto2.gif') no-repeat center center;" title="Ver la mascota"></a>
      <a href="dirección3" class="otras-mascotas_foto" style="background:#83ace9 url('direccióndelafoto3.gif') no-repeat center center;" title="Ver la mascota"></a>
</li>
</ul> 

Código HTML:

.otras-mascotas_foto {
	width:100px;
	height:100px;
	text-align:center;
	border:1px solid #fff;
	float:left;
	margin:3px;
}

He probado varias cosas, pero ninguna me funciona bien:

Poner text-align:center a <ul> o al div que coge la lista, dejar margin-left:XXpx, pero como la lista se genera dinámicamente, en unos casos hay 2 registros y en otros 5 :(

Un saludo!

[messer]

Disculpa no entiendo que quieres lograr. :(