Centrer horizontalement 2 boites

Bonjour à tous,

je souhaite centrer horizontalement 2 boites en css qui elles même contiennent des choses et cela le plus correctement possible, je ne trouve pas de choses claires sur internet, sauriez-vous faire ça ?


Je vous remercie

Salut,

Pour centrer horizontalement typiquement on utilise un margin: 0 auto. Si tu veux que tes deux boites soient sur la même ligne alors le margin devra se trouver sur le conteneur, et tu devras changer le mode d'affichage des éléments concernés (genre float: left, display: inline/inline-block). Enfin les solutions sont multiples. Voici quelques articles qui pourront t'éclairer :

- Centrer les éléments ou un site web en CSS ;
- Guide de survie du positionnement CSS ;
Modifié par Gili (10 Apr 2012 - 15:31)

Ah très sympa merci sinon j'avais commencé par ça

<style type="text/css">
.center
{
margin:auto;
width:80%;
background-color:#b0e0e6;
text-align:center
}
{
margin:auto;
background-color:#b0e0e6;
}
</style><br>
<div class="center">
<div>boite1</div><div>boite2</div>
</div>

mais là les boites ne sont pas sur la même ligne !

bon je n'y arrive pas, impossible de trouver une explication claire de la façon simple de centrer et aligner plusieurs boite en css !

Salut,

Tu devrais lire les deux liens de Gili, tout y est
Voilà un exemple simple, à adapter.

HTML :

<div id="conteneur">
    <div id="gauche">
    …
    </div>
    <div id="droite">
    …
    </div>
</div>

CSS

#conteneur {
margin: 0 auto;
width: 500px;
}
#gauche {
width: 250px;
float: left;
}
#droite {
width: 250px;
float: right;
}

Modifié par audrasjb (10 Apr 2012 - 19:37)

merci, et pour centrer le contenu des boites gauche et droite, le mieux est d'utiliser

text-align:center

c'est ça ?


MERCI

Pour le contenu, oui.