Centrer <body> en css [Résolu/Fermé]

Messages postés
2222
Date d'inscription
dimanche 26 août 2007
Statut
Membre
Dernière intervention
7 juillet 2015
- - Dernière réponse : Jessicat322
Messages postés
61
Date d'inscription
vendredi 19 février 2010
Statut
Membre
Dernière intervention
18 juin 2013
- 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

Meilleure réponse
Messages postés
6
Date d'inscription
lundi 4 janvier 2010
Statut
Membre
Dernière intervention
5 septembre 2011
15
15
Merci
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>

Dire « Merci » 15

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 70107 internautes nous ont dit merci ce mois-ci

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
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;
}
Non valide W3C HTML4 strict....
Messages postés
2503
Date d'inscription
vendredi 29 octobre 2004
Statut
Contributeur
Dernière intervention
13 février 2018
557
4
Merci
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.
1
Merci
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
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é
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76 -
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>
Jessicat322
Messages postés
61
Date d'inscription
vendredi 19 février 2010
Statut
Membre
Dernière intervention
18 juin 2013
5 -
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.
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
Jessicat322
Messages postés
61
Date d'inscription
vendredi 19 février 2010
Statut
Membre
Dernière intervention
18 juin 2013
5 -
Merci pour l'info :)
Messages postés
2222
Date d'inscription
dimanche 26 août 2007
Statut
Membre
Dernière intervention
7 juillet 2015
244
0
Merci
Merci tu m'as donné le bon truc!!
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2615
0
Merci
Bonjour,

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

--