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.

Centrer horizontalement div "table-cell"

Centrer un élément en CSS

Discussions similaires

Partager

Partager