[HTML] centrer DIV dans la page [Fait]

**graphicsxp** · 20/02/2006, 17h17

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

Merci d'avance.

**Nesmontou** · 20/02/2006, 17h25

Salut, pour le centrage horizontal de ton div :

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
<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

http://web.developpez.com/faq/html/?...orizontalement

**graphicsxp** · 20/02/2006, 17h35

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 ?

**Resyek** · 20/02/2006, 17h37

regarde du côté de

Code :

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

horizontal-align et vertical-align

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

**Nesmontou** · 20/02/2006, 17h44

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

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
<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

[HTML] centrer DIV dans la page [Fait]

HTML

Vue hybride

Discussions similaires

Partager

Partager