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

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

5 réponses

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

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

CCM 63730 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
2480
Date d'inscription
vendredi 29 octobre 2004
Statut
Contributeur
Dernière intervention
13 février 2018
584
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.
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é
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>
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
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
Merci tu m'as donné le bon truc!!
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 670
Bonjour,

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

--