Discussion :

[Arsene12]

Bonjour,

je souhaiterai centrer 3 div à l'intérieur d'un autre div qui les contient.

Mon code fonctionne pas :

https://jsfiddle.net/f0ha62q8/

Code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="bandeau">
<div id="gauche">Gauche</div>
<div id="milieu">Milieu</div>
<div id="droite">Droite</div>
</div>

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#bandeau
{
	background-color:#F00;
	width: 800px;
}
#gauche
{
	background-color:#F00;
	width: 200px;
	float: left; 
}
#milieu
{
	background-color:#FF0;
	width: 200px;
	float: left;
}
#droite
{
	background-color:#0F0;
	width: 200px;
	float: left;
}

Pourriez-vous m'indiquer comment procéder svp? Merci d'avance.

Cordialement,

Arsène

[Invité]

Bonjour,

Englobe les 3 div d'un autre div.

Ou, au lieu de float:left; mets display:inline-block;.

[Arsene12]

c'est bien le code que je cherchais. Je vous remercie beaucoup.

[NoSmoking]

Bonjour,
attention toutefois aux « whitespace » avec le display:inline-block, d'autant qu'avec le support actuel de display:flex il serait dommage de s'en priver.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#bandeau {
    background-color:#000;
    width: 800px;
    justify-content:center;
    display:flex;
}
#gauche {
    background-color:#F00;
    width: 200px;
}
#milieu {
    background-color:#FF0;
    width: 200px;
}
#droite {
    background-color:#0F0;
    width: 200px;
}

[Cyberdome]

Hm de mémoire je crois que le problème des whitespace peut être réglé en ajoutant des commentaires vides entre les blocks dans le html, petite astuce étrange qui change le comportement du navigateur, par contre je ne sais pas si ça fonctionne aussi avec le display:flex;