centrer un contenu

**gaya_102** · 09/03/2009, 22h56

bonjour
voila je voudrais centrer le contenu de ma page. le mettre au centre de la partie rose beige

http://www.sandrineetgwen.fr/emelinejourj.php

Je dois utiliser les marging padding?

merci d'avance

**12monkeys** · 09/03/2009, 23h18

Bonsoir

Une réponse dans la FAQ : http://xhtml.developpez.com/faq/?pag...orizontalement ou dans un tutoriel : http://maxdesign.developpez.com/tuto.../centrer-bloc/.

Mais je ne comprends pas trop, ton contenu est déjà centré !

**gaya_102** · 09/03/2009, 23h23

en fait je voulais centrer ma page mais dans la hauteur

**12monkeys** · 09/03/2009, 23h45

Ah ok

Voici le code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Centrage horizontal et vertical</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
 
<div id="centrer">
Contenu centre
</div>
 
</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
10
div#centrer {
  position:absolute;
  left: 50%; 
  top: 50%;
  width: 800px;
  height: 500px;
  margin-left: -400px; /* moitié de la largeur */
  margin-top: -250px; /* moitié de la hauteur */
  border: 1px solid black;
}

Donc on positionne l'élément en absolute, on positionne le coin supérieur gauche au milieu par left: 50%; et top: 50%;

Puis on donne une dimension à l'élément et enfin on le centre grâce à margin-top: -250px; et margin-left: -400px; qui sont chacun la moitié de la taille, ceci pour faire revenir l'élément au centre.

centrer un contenu

Centrer un élément en CSS

Discussions similaires

Partager

Partager