Center un bloc verticalement sans connaitre sa taille

**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;
	    }

Center un bloc verticalement sans connaitre sa taille

CSS

Vue hybride

Discussions similaires

Partager

Partager