web-dev-qa-db-fra.com

Comment centrer le corps sur une page?

J'essaie de centrer l'élément body sur ma page HTML.

enter image description here

Fondamentalement, dans le CSS, j'ai défini l'élément body à display: inline-block; pour qu’elle soit aussi large que son contenu. Cela fonctionne bien. Toutefois, margin: 0px auto; ne le centre pas sur la page.

Est-ce que quelqu'un sait comment réparer ceci? Je veux que le grand carré bleu soit centré sur la page et ne flotte pas à gauche comme c'est le cas maintenant.

Voici mon CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
htmlcsscentercentering
27
Ryan Peschel

Appliquez également text-align: center; sur l'élément html comme ceci:

html {
  text-align: center;
}

Une meilleure approche consiste à créer un conteneur intérieur, qui sera centralisé, et non le corps.

26
Madara Uchiha
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

Cela fonctionnera sur la plupart des navigateurs, y compris IE.

30
Freakishly

Vous devez spécifier la largeur du corps pour qu'il soit centré sur la page.

Ou mettez tout le contenu dans la div et centrez-le.

<body>
    <div>
    jhfgdfjh
    </div>
</body>​

div {
    margin: 0px auto;
    width:400px;
}

Un séjour sans faille

9
SRN

Pour ceux qui font connaissent la largeur, vous pouvez faire quelque chose comme

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

Je suis également d'accord pour ne pas définir text-align: center sur le corps, car cela peut gâcher le reste de votre code et vous devrez peut-être définir individuellement text-align: left sur beaucoup de choses alors ou à l'avenir.

3
DardanM