[CSS 3] Centrer horizontalement div "table-cell"

windmastr26 · 19/11/2011, 11h07

Salut à tous,

Voici une question qui a été posée maintes fois, j'en suis bien concient, mais je n'arrive pourtant pas à appliquer les solutions proposées à mon cas de figure...

J'ai 2 div dans un conteneur qui dispose de la propriété "table-cell". Je souhaiterai centrer le tout :

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
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>test</title>
  <style type="text/css">
   body{
     margin:0;
     padding:0;
   }
   #conteneur div{
     display:table-cell;
     margin-left:auto;
     margin-right:auto;
     width:400px;
   }
   #contenu{
     background-color:green;
     width:250px;
   }
   #menu{
     background-color:red;
     width:50px;
   }
  </style>
 </head>
 <body>
  <div id="conteneur">
   <div id="contenu">blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR></div>
   <div id="menu">55555</div>
  </div> 
 </body>
</html>

Désolé, ça n'est sûrement pas valide niveau w3c mais c'est un code écrit à la va-vite.

Je sais également que ça ne sera pas "visible" sur les versions d'IE antérieurs à la v9 mais je n'ai pas envie de passer par des tableaux, ou par des background fictifs (car dans ce dernier cas je trouve qu'on perd la logique du css).

J'ai essayé donc avec les "margin:auto", "text-align:center", ... Mais impossible de centrer ces 2 div...

Est-ce qu'un âme charitable pourrait m'aider ?

Merci dans tous les cas

miss_socrates · 19/11/2011, 16h23

Voici une proposition de code où les 2 div sont centrés.
Je n'utilise pas de cellule de tableau (table-cell) car je ne vois pas l'utilité (pas de présentation structurée) mais une div conteneur, un div contenu et un div menu.
Ici en CSS, il faut utiliser

Code :

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

#conteneur

et non pas

Code :

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

#div conteneur

J'ai placé les div verticalement par la propriété

Code :

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

display: block;

mais on peut les aligner horizontalement avec

Code :

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

display: inline;

Le

Code :

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

margin: 0 auto;

de la div contenu permet de laisser une marge égale de chaque côté ce qui va la centrer.

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>test</title>
  <style type="text/css">
   body{
     margin:0;
     padding:0;
   }
   #conteneur{
     display: inline;
     margin: 0 auto;
     position: absolute;
	 float: left;
	 width: 900px;
	 height: auto;
   }
   #contenu{
     display: block;
     margin: 0 auto;
	 position: relative;
	 text-align: center;
	 background-color:green;
     width:250px;
   }
   #menu{
     display: block;
     margin: 0 auto;
	 position: relative;
	 clear: both;
	 text-align: center;
	 background-color:red;
     width:50px;
	 font-family: arial;
   }
  </style>
 </head>
 <body>
  <div id="conteneur">
   <div id="contenu">blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR>blablablabalbal<BR>blakfjdjflsjfsdf<BR></div>
   <div id="menu">55555</div>
  </div> 
 </body>
</html>

windmastr26 · 19/11/2011, 19h26

Merci miss_socrates pour cette réponse. Hélas les div, même s'ils sont bien alignés, le sont l'un en dessus de l'autre.

Pour ma part, il me faut des div cote à cote et, pour compliquer les choses, de même hauteur (raison pour laquelle j'ai utilisé l'attribut "table-cell", même s'il n'est compatible sur IE que depuis la version 8).

Edit: J'ai rajouté l'attribut "align=center" directement dans ma balise "div id=conteneur". Bizarrement le div s'est centré. Ça me paraît trop simple mais je vais voir ce que ça donne et faire une feuille de style à part pour les versions IE antérieures à la 9.

miss_socrates · 20/11/2011, 12h18

Je les ai alignés verticalement parce qu'il me semblait logique de mettre le menu au-dessus. La solution pour aligner horizontalement était dans ma réponse:

Il est possible de les aligner horizontalement par

Code :

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

div{display: inline;}

La commande "align=center" est obsolète, il vaut mieux utiliser le CSS: div{text-align: center;}

Pour avoir les div de même hauteur, on peut utiliser (pour une hauteur des div de 200px par ex.) : en HTML:

Code :

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

1
2
<div1 class="format"> 
<div2 class="format">

et en CSS:

Code :

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

.format{height: 200px;}

ce qui sera interprété correctement sur toutes les versions des navigateurs.

windmastr26 · 20/11/2011, 22h20

Désolé, je me suis peut être mal exprimé.

Bien entendu je suis en mesure de créer 2 div de hauteur identique (d'autant plus s'il s'agit de définir une hauteur fixe). Mais dans mon cas de figure, la hauteur est dynamique, et elle ne sera en aucun cas la même pour les 2, d'où la difficulté de la chose.

Pour l'attribut "align", il n'est effectivement pas autorisé avec un doctype "strict", c'est pourquoi je suis passé sur du Transitional

Je vais continuer à creuser histoire de réussir à combiner "div de même hauteur" et "alignement horizontal".

miss_socrates · 28/11/2011, 09h02

Pour que la hauteur de la div corresponde au contenu, on peut employer:

Code :

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

.div{height: auto;}

Ainsi, la hauteur sera adaptée automatiquement au contenu de chaque div.

windmastr26 · 28/11/2011, 09h53

Merci miss_socrates pour cette réponse, hélas les 2 div doivent être à la même hauteur...

Si seulement IE supportait le "table-cell", ce serait tellement plus simple

Candygirl · 28/11/2011, 16h20

Hello,

En principe il te suffit d'ajouter:

Code :

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

1
2
3
4
5
 
   #conteneur {
	display:table;
	margin:0 auto;
   }

A ton code d'origine.

28/11/2011, 09h02	#6
miss_socrates Membre habitué Inscription : mai 2011 Messages : 109 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : mai 2011 Messages : 109 Points : 134 Points : 134	centrer des div Pour que la hauteur de la div corresponde au contenu, on peut employer: Code : Sélectionner tout - Visualiser dans une fenêtre à part .div{height: auto;} Ainsi, la hauteur sera adaptée automatiquement au contenu de chaque div.
	00

19/11/2011, 19h26	#3
windmastr26 Membre du Club Développeur informatique Inscription : juillet 2009 Messages : 176 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juillet 2009 Messages : 176 Points : 48 Points : 48	Merci miss_socrates pour cette réponse. Hélas les div, même s'ils sont bien alignés, le sont l'un en dessus de l'autre. Pour ma part, il me faut des div cote à cote et, pour compliquer les choses, de même hauteur (raison pour laquelle j'ai utilisé l'attribut "table-cell", même s'il n'est compatible sur IE que depuis la version 8). Edit: J'ai rajouté l'attribut "align=center" directement dans ma balise "div id=conteneur". Bizarrement le div s'est centré. Ça me paraît trop simple mais je vais voir ce que ça donne et faire une feuille de style à part pour les versions IE antérieures à la 9.
	00

20/11/2011, 22h20	#5
windmastr26 Membre du Club Développeur informatique Inscription : juillet 2009 Messages : 176 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juillet 2009 Messages : 176 Points : 48 Points : 48	Désolé, je me suis peut être mal exprimé. Bien entendu je suis en mesure de créer 2 div de hauteur identique (d'autant plus s'il s'agit de définir une hauteur fixe). Mais dans mon cas de figure, la hauteur est dynamique, et elle ne sera en aucun cas la même pour les 2, d'où la difficulté de la chose. Pour l'attribut "align", il n'est effectivement pas autorisé avec un doctype "strict", c'est pourquoi je suis passé sur du Transitional Je vais continuer à creuser histoire de réussir à combiner "div de même hauteur" et "alignement horizontal".
	00

28/11/2011, 09h53	#7
windmastr26 Membre du Club Développeur informatique Inscription : juillet 2009 Messages : 176 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juillet 2009 Messages : 176 Points : 48 Points : 48	Merci miss_socrates pour cette réponse, hélas les 2 div doivent être à la même hauteur... Si seulement IE supportait le "table-cell", ce serait tellement plus simple
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email