Centrer Div dans Div

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:

---

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:

---

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

Bonjour,

Englobe les 3 div d'un autre div.

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

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

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:

---

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; }

---

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;