Discussion :

[kohsaka]

bonjour tout le monde,

j'aimerais pouvoir centrer verticalement un block.
je pensais pouvoir m'en sortir avec un line-height, mais ça ne fonctionne pas.
y'a aussi le javascript mais j'aimerais l'éviter bien sur.

voila le code css de la boite a centrer et de son conteneur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#cadre {
	width: 790px;
	height: 100%;
	float: right;
}
 
#contenu {
	width: 600px;
	height: 400px;
	background-color: #FF0000;
	margin-left: auto;
	margin-right: auto;
}

vous pouvez voir la page a cette adresse

je vous remercie pour l'aide que vous pourrez m'apporter. :)

[Bisûnûrs]

Tu peux à la limite passer ce block en position:absolute et son parent en position:relative, et lui mettre un top:50% et un margin-top:-200px; (-hauteur/2). Mais tu serais obligé de faire de même pour le centrer horizontalement, étant donné qu'il perd toute ses relations avec les autres éléments dans le flux :

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
#cadre {
   width: 790px;
   height: 100%;
   float: right;
   position: relative;
}
 
#contenu {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 600px;
   height: 400px;
   background-color: #FF0000;
   margin-left: -300px;
   margin-top:-200px;
}

[kohsaka]

dans mon cas, ça semble la meilleur des solutions puisque je compte mettre un overflow: auto;

par contre dans le cas contraire, avec un long texte, la boite s'agrandit et passe au dessus du pied de page sans le repousser. that's right ? :s

enfin merci bisûnûrs en tout cas