Positionner au centre des blocs qui s'alignent horizontalement (left)

Bonjour !

Ce que je voudrais faire ? Simplement pouvoir positionner au centre de la fenêtre du navigateur les blocs qui s'alignent horizontalement.
Pour que les blocs se suivent les uns à la suite des autres horizontalement j'ai affecté à chacun un float:left. Mais les blocs s'alignent à partir du bord gauche de l'écran (évidemment alors que j'aurais voulu les voir alignés au centre de l'écran.

CSS :

#bloc1 { border:2px black solid; }
#bloc2 { border:2px red solid; }
#bloc3 { border:2px yellow solid; }
#bloc4 { border:2px green solid; }
#bloc5 { border:2px pink solid; }
#bloc6 { border:2px silver solid; }
#bloc7 { border:2px gold solid; }
#bloc8 { border:2px blue solid; }
#bloc9 { border:2px navy solid; }	

.blok { float:left;
	width:100px; height:100px;
	margin:10px; }

Dans le body :

 
<div id="bloc1" class="blok"></div>
<div id="bloc2" class="blok"></div>
<div id="bloc3" class="blok"></div>
<div id="bloc4" class="blok"></div>
<div id="bloc5" class="blok"></div>
<div id="bloc6" class="blok"></div>
<div id="bloc7" class="blok"></div>
<div id="bloc8" class="blok"></div>
<div id="bloc9" class="blok"></div>

On obtiens (différentes tailles du navigateur ) :



Pour avoir les div positionnés au milieu du navigateur, je pourrais tous les englober dans un div plus grand, appelons-le le div conteneur, avec une largeur (width) fixe, dont la valeur permet d'avoir les blocs disposés à l'intérieur du conteneur avec une marge à gauche et à droite a peu près identique, si bien que les div paraîtraient au centre de la page...
Par exemple, si la largeur du div conteneur est de 380px pour 9 div contenus de largeur 100px, on obtiendra 3 div par lignes avec des marges à droite et à gauche à peu près égales. Reste à centrer le div conteneur (pour du même coup centrer les div contenus...) :

#bloc1 { border:2px black solid; }
#bloc2 { border:2px red solid; }
#bloc3 { border:2px yellow solid; }
#bloc4 { border:2px green solid; }
#bloc5 { border:2px pink solid; }
#bloc6 { border:2px silver solid; }
#bloc7 { border:2px gold solid; }
#bloc8 { border:2px blue solid; }
#bloc9 { border:2px navy solid; }	

.blok { float:left;
	width:100px; height:100px;
	margin:10px; }	
	
#conteneur {border:3px black dashed;
	width:380px;
	margin-left:auto;
	margin-right:auto; }

<div id="conteneur">
		 <div id="bloc1" class="blok"></div>
		 <div id="bloc2" class="blok"></div>
		 <div id="bloc3" class="blok"></div>
		 <div id="bloc4" class="blok"></div>
		 <div id="bloc5" class="blok"></div>
		 <div id="bloc6" class="blok"></div>
		 <div id="bloc7" class="blok"></div>
		 <div id="bloc8" class="blok"></div>
		 <div id="bloc9" class="blok"></div>
</div>

Mais si j'explique tout ceci c'est pour vous dire que je ne souhaite pas cela. Car cette méthode revient également à rendre la position des div contenus immobile, si bien qu'en diminuant la taille de la fenêtre du navigateur, les div contenus ne bougeront pas (cas numéro 3 image ci-dessous), là où je voudrais que les chacun de mes blocs puissent demeurer fluctuants et se ramener à la ligne quand on diminue la taille de la fenêtre du navigateur ! (comme le cas numéro 4 mais que les blocs soient centrés dans la fenêtre du navigateur qui a diminué de taille)




Est ce que je demande l'impossible ?
Modifié par NICSS (26 May 2007 - 23:28)

Bonsoir,

NICSS a écrit :
Est ce que je demande l'impossible ?

Pas loin.

Disons que ce que tu demandes est :
- possible avec un affichage de type en-ligne (display: inline), et une text-align: center sur le conteneur des blocs, si jamais le contenu s'y prête, par exemple pour des vignettes de 100x100px ;
- théoriquement possible avec display: inline-block (et toujours un text-align: center sur le conteneur des blocs) ;
- autrement impossible.

Si le contenu de chaque bloc n'est pas un objet de type en-ligne (par exemple une image) de 100x100px, la première solution ne sera pas utilisable. On pourra alors s'intéresser à display: inline-block, en sachant cependant :
- qu'il est compris par Safari, Konqueror et Opera ;
- qu'il est partiellement compris par IE (à tester) ;
- qu'il n'est pas du tout compris par Firefox (pour une fois dernier de la classe).

Bref, display:inline-block n'est pas forcément exploitable, ou alors à titre expérimental...

salut,

tu peux toujours associer un width en % a ton div conteneur. tu auras
un minimum de centrage sans le problème du cas 3.

sinon ...

CPascal a écrit :
tu peux toujours associer un width en % a ton div conteneur. tu auras un minimum de centrage sans le problème du cas 3.

Le bloc lui-même sera centré, mais pas les éléments qu'il contient. Donc à priori ça ne va pas.

avec un conteneur general sur lequel tu mets un margin: auto; ça marcherait pas ?

Rasta a écrit :
avec un conteneur general sur lequel tu mets un margin: auto; ça marcherait pas ?

Non, car il faudrait lui donner une largeur fixe.

ok d'ac pardon

Florent V. a écrit :
Bonsoir,

- possible avec un affichage de type en-ligne (display: inline), et une text-align: center sur le conteneur des blocs, si jamais le contenu s'y prête, par exemple pour des vignettes de 100x100px ;

Merci Florent V pour cette info, je n'avais en fait pas bien connaissance de display...

J'ai donc affecté un diplay:inline au lieu un float:left pour des div qui avaient une longueur fixée, et ça marche parfaitement sous IE mais foire sous Firefox, les longueurs width et height n'étant plus prises en compte... ainsi que les margins !...

Bonjour,

La méthode de Florent ne fonctionne que pour des balises inlines (img l'est par nature) donc pour aligner des images :

<style type="text/css">
img{
	margin:10px;
}	

#conteneur {
	border:3px black dashed;
	width:75%;
	margin-left:auto;
	margin-right:auto; }
</style>
</head>
<body>
<div id="conteneur">
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
	<img src="image.jpg" alt="" />
</div>

devrait suffire