Center un bloc verticalement sans connaitre sa taille [Résolu]

lolop · 24/05/2011, 19h53

Bonjour,

Je cherche à centrer un bloc dans div que se soit horizontalement et verticalement, alors que je ne connais pas sa taille.

Voici la version simplifiée de ma page. Je veux que #bloc soit centré dans #container.

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
 
<!DOCTYPE HTML> 
<html> 
    <head> 
	<meta charset="utf-8" />
        <title></title>
 
	<style type="text/css" media="screen">
 
	    #wrapper {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: #222;
	    }
 
	    #container {
		position: absolute;
		top: 50px;
		right: 0;
		bottom:0;
		left: 200px;
		background: #e3e3e3;
		text-align: center;
	    }
 
	    #bloc {
		margin: auto auto;
		background: yellowgreen;
		padding: 50px;
		display: inline-block;
	    }
	</style>
    </head>
    <body>
	<div id="wrapper">
		<div id="container">
			<div id="bloc">
			    BLOC
			</div>
		</div>
	</div>
 
    </body>
</html>

Merci de votre aide

Bisûnûrs · 25/05/2011, 07h55

L'utilisation des positions absolues est déjà contestable ..

Pour ton problème, tu dois soit passer par un tableau de mise en forme pour pouvoir être cross-browser, soit utiliser la propriété display:table-cell couplé de vertical-align:middle sur ton container, en ayant bien en tête que ça ne fonctionnera pas sur les anciennes version de IE.

lolop · 25/05/2011, 10h37

Merci de ta réponse.

J'utilise la position absolute, car j'utilise toute la taille de l'écran et c'est la méthode la plus simple pour le faire.

J'ai essayé le table-cell, cell,et vertical align mais ça ne donne pas du tout le résultat voulu.

D'autre part le site est en html5/css3 donc je me moque de la méthode

Bisûnûrs · 25/05/2011, 11h05

Le display:table-cell ne semble pas fonctionner avec le position:absolute. Malheureusement en CSS il n'y a pas de méthode miracle pour faire ce que tu veux, si tu ne connais pas la hauteur de ton contenu. Il ne reste plus que le tableau ou le centrage en Javascript.
Ou peut-être une méthode sortie de derrière les fagots dont je n'aurais pas connaissance, ça aussi c'est possible.

lolop · 25/05/2011, 15h37

C'est bien que qu'il me semblait. Je vais passer par du jquery

Merci de ton aide

Candygirl · 25/05/2011, 18h53

Hello,

Tu peux essayer de jouer en dissociant le position absolute du display table:

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
 
		body {
			background: #222;
			position:absolute;
			top: 50px;
			left: 200px;
			bottom: 0;
			right: 0;
			padding:0;margin:0;			
		}
 
	    #wrapper {
			width:100%;
			height:100%;
			display:table;
	    }
 
	    #container {
			background: #e3e3e3;
			text-align: center;
			display:table-cell;
			vertical-align:middle;		
	    }
 
	    #bloc {
			margin:0 auto;
			background: yellowgreen;
			padding: 50px;
			display: inline-block;
	    }

Macmillenium · 26/05/2011, 16h41

Tu peux utiliser un span doté d'un display:inline-block + height:100% afin de l'aligner verticalement par rapport à ton wrapper:

Code html :

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
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<style>
		html, body {
			margin:0; padding:0;
			height:100%
		}
 
		body { text-align:center }		
 
		.tampon, #wrapper {  
			display:inline-block;
			vertical-align:middle
		}
 
		.tampon { height:100% }
 
		#wrapper { 
			background:green;
			width:960px; 
			text-align:left
		}
	</style>
	<!--[if lte IE 7]>
		<style media="screen">
			#wrapper { display:inline }
		</style>
	<![endif]-->	
</head> 
 
<body>
	<span class="tampon"></span>
 
	<div id="wrapper">
		bla bla <br />
		bla bla <br />
		bla bla <br />
		bla bla <br />
		bla bla
	</div>
</body>
</html>

Candygirl · 27/05/2011, 13h57

Citation:

Envoyé par Macmillenium

Tu peux utiliser un span doté d'un display:inline-block + height:100% afin de l'aligner verticalement par rapport à ton wrapper:

Si la largeur du wrapper dépasse celle de la fenêtre de visualisation il se positionne alors hors écran tout en bas

Macmillenium · 27/05/2011, 14h37

Il suffirait de mettre un min-width sur le BODY.

27/05/2011, 14h37	#9
Macmillenium Rédacteur/Modérateur Inscription : mars 2008 Messages : 2 288 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Sarthe (Pays de la Loire) Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : mars 2008 Messages : 2 288 Points : 3 205 Points : 3 205	Il suffirait de mettre un min-width sur le BODY. __________________ Je ne réponds pas aux questions techniques par MP.
	10

25/05/2011, 07h55	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	L'utilisation des positions absolues est déjà contestable .. Pour ton problème, tu dois soit passer par un tableau de mise en forme pour pouvoir être cross-browser, soit utiliser la propriété display:table-cell couplé de vertical-align:middle sur ton container, en ayant bien en tête que ça ne fonctionnera pas sur les anciennes version de IE.
	10

25/05/2011, 10h37	#3
lolop Invité de passage Inscription : juillet 2009 Messages : 4 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 4 Points : 0 Points : 0	Merci de ta réponse. J'utilise la position absolute, car j'utilise toute la taille de l'écran et c'est la méthode la plus simple pour le faire. J'ai essayé le table-cell, cell,et vertical align mais ça ne donne pas du tout le résultat voulu. D'autre part le site est en html5/css3 donc je me moque de la méthode
	00

25/05/2011, 11h05	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Le display:table-cell ne semble pas fonctionner avec le position:absolute. Malheureusement en CSS il n'y a pas de méthode miracle pour faire ce que tu veux, si tu ne connais pas la hauteur de ton contenu. Il ne reste plus que le tableau ou le centrage en Javascript. Ou peut-être une méthode sortie de derrière les fagots dont je n'aurais pas connaissance, ça aussi c'est possible.
	00

25/05/2011, 15h37	#5
lolop Invité de passage Inscription : juillet 2009 Messages : 4 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 4 Points : 0 Points : 0	C'est bien que qu'il me semblait. Je vais passer par du jquery Merci de ton aide
	00

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