[HTML] centrer DIV dans la page

Version imprimable

20/02/2006, 17h17
graphicsxp

[HTML] centrer DIV dans la page

Bonjour,
J'aimerais savoir comment centrer une DIV au milieu de la page (en hauteur en en largeur).

Merci d'avance.

Salut, pour le centrage horizontal de ton div :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
	<title>Centrage</title>
	<style type="text/css">
        body
        {
                text-align: center;
        }
        
        #global
        {
                background-color: #f00;
                margin: 0 auto;
                width: 200px;
        }
        </style>
</head>
<body>
	<div id="global">
	<p>Texte</p>
	</div>
</body>
</html>

Le text-align: center; (body) pour IE et margin: 0 auto; (div) pour FF, cf :faq: http://web.developpez.com/faq/html/?...orizontalement

20/02/2006, 17h35
graphicsxp

Merci mais ce n'est pas tout a fait ce que j'ai demandé.

Je souhaiterais avoir un DIV de couleur rouge d'une taille donné, qui soit centré dans la page, à la fois horizontalement mais aussi verticalement.
Comment faire ca ?
20/02/2006, 17h37
Resyek

regarde du côté de

Code:

horizontal-align et vertical-align

Et lis les FAQ ou cette page : http://wiki.media-box.net/documentation/css

Re, si ton div a une largeur et une hauteur fixes, tu peux faire ceci :

Code:

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
<html>
<head>
	<title>test</title>
	<style type="text/css">
        body
        {
                margin: 0;
                text-align: center;
        }
        
        #global
        {
                background-color: #f00;
                margin: -150px -100px;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200px;
                height: 300px;
        }
        </style>
</head>
<body>
	<div id="global">
	...
	</div>
</body>
</html>

EDIT : inconvénient, ton div peut dépasser de l'écran :oops: