[CSS 2] Centrage de plusieurs blocks flottants [Résolu]

[vincent.le]

Bonjour,

J'ai une div qui contient des blocks qui flottent. J'aimerais pouvoir centrer tous les blocks de manière automatique et je n'y arrive pas.

Le HTML :

Code :

1
2
3
4
5
6
7
 
<div id="cadre">
	<p>Salut la compagnie !</p>
	<p>Encore un mot complètement nouveau</p>
	<p>Plouf</p>
</div>
</html>

Le CSS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
font-size: 12px;
font-family:verdana,arial,sans-serif;}
 
div#cadre {
width:600px; 
height:600px;}
 
p {
font-size: 1em;
float:left;
padding:.5em; 
margin:auto;}

Je ne sais pas trop par quel bout prendre le problème. Pour le moment, j'essaie de mettre une marge auto à mes <p>, mais ça ne marche pas.

Avez vous des suggestions ?

Merci

PS : j'ajoute un schéma pour que tout soit plus clair

[ornitho13]

Salut, utilise le margin pour centrer ton <div id="cadre"> :

Code css :

1
2
3
4
5
6
 
div#cadre {
	width:600px; 
	height:600px;
	margin:0px auto;
}

[vincent.le]

Bonjour,

Cela centre la div#cadre dans la page, ce n'est pas ce que je recherche.

J'ai ajouté un schéma pour mieux expliquer.

[ornitho13]

oui je viens de voir cela

et bien essaye ceci :

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
div#cadre {
	width:600px; 
	height:600px;
	margin:0px auto;
	text-align:center;
}
 
p {
	font-size: 1em;
	display:inline-block;
	white-space: nowrap;
	margin:10px;
}

utilise un "white-space: nowrap;" afin de ne pas permettre le retour à la ligne.

[vincent.le]

Yes, ça marche !

Par contre, même si je mets margin:0px pour les <p>, j'observe des petites marges entre les <p> d'une même ligne. Ca ne me dérange pas, mais j'aimerais comprendre d'où ça vient. (cf capture d'écran).

Autre chose, ça ne marche pas très bien dans IE6 : tous les <p> sont remis à la ligne.

[ornitho13]

En fait la propriété display:inline-block; est sensible au retour à la ligne de ta structure html, donc tu as 2 façons de faire:
- soit tu mets tous tes <p> sur la même ligne:

Code html :

1
2
 
<div id="cadre"><p>Salut la compagnie !</p><p>Encore un mot complètement nouveau</p><p>Plouf</p><p>Encore un mot complètement nouveau</p><p>Encore un mot complètement nouveau</p><p>Encore un mot complètement nouveau</p></div>

-soit tu rajoutes des commentaires:

Code html :

1
2
3
4
5
6
7
8
9
 
<div id="cadre">
	<p>Salut la compagnie !</p><!-- 
	 --><p>Encore un mot complètement nouveau</p><!-- 
	 --><p>Plouf</p><!-- 
	 --><p>Encore un mot complètement nouveau</p><!-- 
	 --><p>Encore un mot complètement nouveau</p><!-- 
	 --><p>Encore un mot complètement nouveau</p>
</div>

Enfin, il faut savoir que inline-block n'est pas compatible sous IE6

[Macmillenium]

Envoyé par ornitho13

Enfin, il faut savoir que inline-block n'est pas compatible sous IE6

IE6 et 7 (uniquement sur les éléments de rendu block).
Étant donné que display:inline-block confère le layout, tu peux émuler ce comportement en déclarant un display:inline aux éléments P, entre commentaires conditionnels.

[vincent.le]

Merci pour vos réponses.

Je n'ai pas compris ce que Macmillenium voulait dire, mais après des recherches, j'ai trouvé que IE6 a un comportement différent s'il s'agit de <p> ou de <a>.

Dans mon ca, si je remplace mes <p> par des <a>, tout marche bien pour Firefox et IE6.

Finalement, ma problématique était une problématique de nuage de tags.