float:left; e allineamento al centro

[wanttobefree]

Ho trovato su questo sito un esempio di rollover di immagini usando i css anzichè javascript.
Per funzionare usa display:block; e poi float: left; in modo tale da riportare tutte le immagini sulla stessa riga.
Il problema è che vorrei le immagini al centro, e non a sinistra, ma da quel che ho capito, con float non si può fare...
Conoscete qualche alternativa?
Grazie

[andrea.paiola]

margin:0 auto (per i browser seri)
text-align:center (per IE)

[wanttobefree]

Originariamente inviato da andrea.paiola
margin:0 auto (per i browser seri)
text-align:center (per IE)

già usato:

div#pulsantiinalto span{float:left; margin: 0 auto; padding: 0;}
div#pulsantiinalto a{display: block;}

ma l'allineamento è sempre a destra... Perchè?

[andrea.paiola]

posta un link

[wanttobefree]

l'html è:

<div id="pulsantiinalto">
<span id="uno">[img]immagini/pulsanti/home.gif[/img]</span>
<span id="due">[img]immagini/pulsanti/giochi.gif[/img]</span>
<span id="tre">[img]immagini/pulsanti/giochi_online.gif[/img]</span>
<span id="quattro">[img]immagini/pulsanti/barzellette.gif[/img]</span>
<span id="cinque">[img]immagini/pulsanti/scherzi.gif[/img]</span>
<span id="sei">[img]immagini/pulsanti/passatempi.gif[/img]</span>
</div>

il css (interno alla pagina, perchè ho scoperto che se uso un css esterno, non funziona!!)

<style type="text/css">
img{border-width: 0;}
div#pulsantiinalto span{float:left; margin: 0 auto; padding: 0;}
div#pulsantiinalto a{display: block;}
div#pulsantiinalto a:hover{line-height: 1px; /*serve per IE*/}
div#pulsantiinalto a:hover img{visibility: hidden}
span#uno{background: url("immagini/pulsanti/home2.gif")}
span#due{background: url("immagini/pulsanti/giochi2.gif")}
span#tre{background: url("immagini/pulsanti/giochi_online2.gif")}
span#quattro{background: url("immagini/pulsanti/barzellette2.gif")}
span#cinque{background: url("immagini/pulsanti/scherzi2.gif")}
span#sei{background: url("immagini/pulsanti/passatempi2.gif")}
</style>

grazie