Discussion :

[sibile]

Bonsoir, voici mon problème:

J' ai un div avec 3 divs à l' intérieur, je veux centrer les 3 divs, y-a-t-il un moyen sans passer par un calcul de marges? J' ai essayé text-align:center avec display:inline sans succès.

Merci d' avance.

[GihefBey]

Bonjour,

Pour les anciens navigateurs ajoute

Code :

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

1
2
3
4
 
body {
  text-align : center;
...

Ensuite, pour les autres, et si ton <div> conteneur a une largeur, ajoute

Code :

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

1
2
3
4
5
 
#bloc_conteneur {
  margin : 0 auto;  /* marges à 0 en haut et en bas 
                          et automatiques à gauche et à droite */
...

[pracede2005]

Sibile, pourrais tu mettre ton code pour que l'on voie?

[devyan]

Tu n'es surement pas le premier à vouloir faire cela, d'autres ont probablement déjà rencontré ce problème...




Regarde un peu la discussion suivante et en particulier ce message...

[sibile]

Excusez-moi je me suis absentée.
Eh bien désolée mais ça ne fonctionne pas!! Je ne peux pas centrer 2 divs sans préciser de marges. Mon astuce consiste en créant un div conteneur à la bonne largeur et centré avec margin:0 auto; puis d' y insérer 2 divs ayant des marges gauches et droites adéquates.

Ex:

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
#conteneur {
margin:0 auto;
width:850px;
}
 
#gauche {
width:400px;
margin-right:25px;
}
 
#droite {
width:400px;
margin-left:25px;
}

xhtml:

Code :

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

1
2
3
4
5
<div id="conteneur">
<div id="gauche">
</div>
<div id="droite">
</div>

Décidément pas toujours pratiques les css!

[HiRoN]

Salut,

Sur le dernier code :
Enlever les marges de #gauche & #droite et les remplacer par float:left; & float:right; afin de "coller" les blocs sur les bords du div #conteneur ?

[Erwan31]

Salut,

Sur le dernier code :
Enlever les marges de #gauche & #droite et les remplacer par float:left; & float:right; afin de "coller" les blocs sur les bords du div #conteneur ?

+1 Tout simplement
En oubliant pas d'ajouter un overflow:hidden sur le conteneur pour qu'il puisse englober ses enfants flottants.