Centrer un div verticalement, dans un div positionné en absolute

**sebhm** · 22/10/2009, 22h12

Bonjour,

la faq montre comment centrer un Div dans un autre.

Code :

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

1
2
3
4
5
  <div id="parent">
  	<div id="enfant">
  		Un bloc positionné au milieu de son parent positionné en relatif
  	</div>
  </div>

avec le css

Code :

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

1
2
3
4
5
6
7
8
9
10
  #parent {
  	height : 500px; /* Height se comporte comme un min-height pour un élément de rendu table-cell */
  	border : 1px solid red;
  	display : table-cell;
  	vertical-align : middle;
  }
 
  #enfant {
  	border : 1px solid green;
  }

mais si le Div parent est positionné en absolute, ca ne marche plus

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  #parent {
  	height : 500px; /* Height se comporte comme un min-height pour un élément de rendu table-cell */
  	border : 1px solid red;
  	display : table-cell;
  	vertical-align : middle;
  	position : absolute;
  	top :0;
  	left : 100px;
  }
  		
  #enfant {
  	border : 1px solid green;
  }

y'a-t-il une solution ?
merci

**CCyrillus** · 23/10/2009, 00h01

bonjour, bonsoir

Lorsque je veut centrer un truc , j'ai une approche differente . JE pense aussi a IE 6 et 7 , pour qui display:table est inconnu.

Dans d'autre cas , la ou le display:inline-block est applicable , le display:table-cell peut devenir une alternative pour FF2 et moins.

Si IE 6 est encore bien present , les ancienne version de firefox disparaissent assez rapidement.

je te propose une approche sur le display:inline-block;
Cette approche requiert 2 element adjacent (l'un invisible servant d'étalon et l'autre pour le contenu ) , ceux la vont se centré mutuellement .
Comme tu fixe une hauteur , cela facilite les choses (a defaut l'etalon fixerait une hauteur minimale , sans imposer de barre de defilement ) .

inline-block , joue sur les contexte de formatage et le haslayout dans IE.
Cependant pour IE lte 7 , il faut activer ce "haslayout" differement pour obtenir l'effet rechercher sur un element de type block par defaut.
IE8 respectant les standard , il n'y a rien a faire de ce coté. On se sert donc des commentaire conditionnel en ciblant les version anterieur a la 8.

Voici le code d'une page a tester a partir d'un conteneur en position absolue:

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
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
 
  #parent {height : 80%; position : absolute;  	top :10%;  	left : 10%;	width:80%;  border : 1px solid red;  
  white-space:nowrap;/* pour garder nos element aligner sur une seule ligne */  	 }
 
#parent #etai , #parent #enfant {display:inline-block;vertical-align:middle; /* modification du comportement d'affichage pour les centré verticalement es uns par rapports aux autres */} 
#etai {width:0px;overflow:hidden;height:100%;padding:0;}		
#enfant {
	width:100%;
	margin:0 -1px ;
	white-space:normal;  	
	border : 1px solid green; 
 
/* 
peut-etre veut t-on voir la barre de defilement apparaitre sur l'enfant plutot que le parent , pour eviter la barre de defilement horizontal  
 
 // max-height est incompatible IE 6
 	*/
	max-height:100%; 
	overflow:auto;  
 
}
p {margin:0;padding:3px;background:#eee;}
  </style>
  <!--[if lte ie 7]>
  <style>
  #parent #etai , #parent #enfant {display:inline;zoom:1;margin:0  -1px; /* rattrape les bordures de demo  */ }
  </style>
  <![endif]-->
  <script type="text/javascript" >
  testh ='auto';
  function hauteur ()  {
  if (testh  =='auto' ) {
 testh='600px'} 
  else 
  {testh = 'auto' }
return testh;
  }
  </script>
  </head>
 
  <body>
  <div id="parent">
 
  	<div id="enfant">
		<p onclick ="  this.style.height=hauteur();" >	Un bloc positionné au milieu de son parent  , quelque soit ,en theorie ,sa position ou comportement dans le flux , compatible IE lte 7 <br>
		(clique moi pour changer ma hauteur <em> auto:600px </em>).</p>
 	</div>
	<div id="etai"></div>
  </div>
 
</body></html>

(l'exemple en ligne : http://gcyrillus.free.fr/essai/valign-middle-block.html )

un autre exemple avec la correction pour FF 2 et inf :
http://yidille.free.fr/plux/valign/u...ine-stack.html

Sur cette exemple , on peut fixer la hauteur de #contenant ou #contenu , et voir un scroll apparaitre au besoin .

Le principe :
2 éléments minimum adjacents en inline-block alignés verticalement , dont 1 etalon avec une hauteur fixe et 1 (ou plusieurs ) conteneur fluide .

Dans les deux exemple , le parents est body , rien n'empeche que ce soit , une section de votre page .

GC

**Macmillenium** · 23/10/2009, 17h06

Hello,

Envoyé par sebhm

mais si le Div parent est positionné en absolute, ca ne marche plus

le display:table-cell n'a pas d'effet sur une boite positionnée en absolute.

**sebhm** · 24/10/2009, 00h11

merci CCyrillus pour ta réponse.
C'est quand meme un code assez lourd pour un simple centrage vertical, mais y'a peut etre pas moyen de faire autrement.

**CCyrillus** · 24/10/2009, 11h20

bonjour,

en effet

, sinon reste toujours l'option d'un tableau d'un cellule qui ne necessite aucune acrobatie CSS .

.

Code :

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

1
2
3
<table><tr><td>
contenu
</td></tr></table>

GC

**sebhm** · 25/10/2009, 02h38

en effet

, c'est ce que reste de plus simple surement.
meme si on aurait du mal à l'expliquer !

merci

Centrer un div verticalement, dans un div positionné en absolute

Centrer un élément en CSS

Discussions similaires

Partager

Partager