[RESOLU] Centrer une série de "div" en "float:left"

Bonjour à tous,

J'ai une question toute simple.
Imaginons une série de <div> de même taille (par exemple 200px sur 100px) en "float:left".
Le code :

<div style="background-color:blue; float:left; text-align:center; margin:auto;">
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
	<div style="width:200px; height:100px; background-color:red; float:left; margin:5px;"></div>
</div>

Voici ce que ça donne :


Le problème c'est que j'aimerais centrer ces cases rouges par rapport à la case bleue comme ceci :
Ou éventuellement comme ça :

Je précise que les deux dernières captures d'écran sont en fait des montages images.

Est-ce que quelqu'un aurait une petite idée ?

D'avance merci
Modifié par Cozy_Cookie (25 Jul 2010 - 21:47)

Bonjour Technologix et merci pour ta réponse.

Le problème c'est que je ne peux pas connaître à l'avance le nombre de blocks sur une ligne puisque ce nombre dépend de la fenêtre du navigateur de mes visiteurs.

Mon div qui englobe tous les block est à 100% histoire permettre d'afficher un maximum de blocks en largeur...

Raphael a écrit :
Salut,

Si la largeur de tes éléments est fluide, ou si tu ne connais pas le nombre d'éléments à centrer, il te suffit de les passer en display: inline-block et d'appliquer un text-align center à leur parent

Bonne chance,

Raphaël

Super. Ca un fonctionne !
Merci beaucoup !