Centrer <body> en css

Résolu

julow Messages postés 2365 Statut Membre -
Jessicat322 Messages postés 69 Statut Membre - 19 févr. 2013 à 21:33

Bonjour,
je cherche le moyen de centrer une div avec le CSS. J'ai trouvé ca sur le net mais ca marche pas (sinon je ne serais pas là!!) :

body {
background-color:#000000 ;
position: absolute;
margin-left:auto; | apparement ces 2 lignes sont sencées centrer mon body à condition d'avoir donné la largeur (ce que j'ai fait)
margin-right:auto; |
width:900px;
text-align:center;
}

Quelqu'un peut il me donner la solution?

Afficher la suite

5 réponses

Réponse 1 / 5

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
9uigui Messages postés 6 Statut Membre 19

Boujour,

Chez moi :

body{ margin: 0 auto; } ou body{ margin: auto; } ne fonctionne pas sous IE8, FF/MOZ ou Chrome !

Par contre :
body{ text-align: center; } fonctionne sous IE8 mais pas avec les autres navigateurs.

J'ai résolu mon problème avec la balise <center> :
<body><center> ... </center></body>
19
1. abfab
  
  Bravo ! pour la balise <center>. J'ai fais tous les forums. J'ai eu des explications ou des solutions alambiquées...
  Et là, c'est la première réponse, simple et claire..
  Félicitations
  
  0
2. navugo
  
  pour centrer le <body>..</body> de votre page HTML, il faut en CSS définir la taille, puis les marges (ici automatique), la taille n'est donnée qu'à titre indicatif :
  body {
  width: 800px;
  margin: auto;
  }
  
  0
3. Moa
  
  Non valide W3C HTML4 strict....
  
  0
Réponse 2 / 5
s.spark Messages postés 2528 Statut Contributeur 618
Salut,

Vire le position: absolute; .

Et perso je préfère :
```
margin: 0 auto; 
```
Que
```
margin-left:auto;
margin-right:auto;
```
Mais là tu tente de centrer body pas la div. Et je ne pense pas que l'on puisse changer la taille de body car cette balise représente toute la fenêtre.
4
Réponse 3 / 5
heycraft

Bonjour, je tombe sur ce sujet qui m'a un peu aider a centrer mon body.

On peut donc declarer une taille à un body, puis attribuer la valeur auto aux margin-left et margin-right. Cela ma centrer mon body et la taille et apparement la bonne.

Merci
2
1. midiweb
  
  j'ai le même prob, comment centrer tout mon site á la fois sur les écrans 4.3 et 16:9. J'ai essayer:
  
  body {
  position: absolute;
  margin: 0, auto;
  padding: 0px;
  width: auto;
  height: 100%;
  display: block;
  }
  
  Mon site reste centré à gauche
  
  0
2. Axion
  
  midiweb ton problème a été sité plus
  
  Il faut enlevé le "position absolute" cela bloque ton site en haut à gauche sinon avec le reste cela devrais fonctionné
  
  0
3. Navid_92 Messages postés 778 Statut Membre 87
  
  Déjà tu met un width auto, or pour que le bloc se centre il faut lui fixer une taille.
  Le position absolute te positionne au point top:0; left:0 (en haut à gauche).
  
  Corrigons ton code maintenant:
  <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Demo</title> <style> html,body{height:100%;margin:0;padding:0;text-align:center} #global{background:#555;margin:0 auto;min-height:100%;text-align:left;width:960px} * html #global{height:100%} </style> </head> <body> <div id="global"> Demo </div> </body> </html>
  
  0
4. Jessicat322 Messages postés 69 Statut Membre 6
  
  Il y a moyen que ce soit compatible avec Explorer (la dernière version) et Firefox (toujours la dernière version) ? Parce que si un accepte, l'autre pas forcément.
  
  0
5. Tyschow
  
  La solution que j'utilise pour ma part est de tout dans une balise <div id="page"> et pour le css :
  #page {
  width: ...px; /* ou width:...%; ou width:...em; au choix, mettez la largeur de votre page*/
  margin-left: auto;
  margin-right: auto;
  }
  Pour un alignement vertical au centre, même principe
  #page {
  height: ... ; /*hauteur de votre page */
  margin-top: auto;
  margin-bottom: auto;
  }
  
  Pour les deux en même temps :
  #page {
  height: ... ; /* hauteur de votre page */
  width: ... ; /* largeur de votre page */
  margin: auto;
  }
  
  Tout est là :
  http://edu.ca.edu/css-centrer-une-page-dans-la
  
  0
Réponse 4 / 5
julow Messages postés 2365 Statut Membre 248

Merci tu m'as donné le bon truc!!
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
Gihef Messages postés 5165 Statut Contributeur 2 781
Bonjour,

Pour info.
Les commentaires en CSS, c'est
```
/* commentaire (sur
plusieurs lignes si nécessaire) */
```
--
0

Centrer <body> en css

5 réponses

Discussions similaires

Newsletters