Comment le corps central sur une page?

Je suis en train de centre de l'élément de corps sur ma page HTML.

Comment le corps central sur une page?

Pour l'essentiel, dans le CSS j'ai mis le corps de l'élément display: inline-block; de sorte qu'il est aussi large que son contenu. Cela fonctionne bien. Cependant, margin: 0px auto; ne pas centrer sur la page.

Personne ne sait comment résoudre ce problème? Je veux le gros carré bleu à être centré sur la page, ne flottant pas vers la gauche, comme il est maintenant.

Voici mon CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
  • Les autres boîtes de ne pas être à l'intérieur du corps?
  • Je suggère de ne pas centraliser body, en fait, faire un centré div
  • vous ne devriez jamais le centre du corps. jetez un oeil à freecsstemplates.com --- vous aurez les concepteurs de toujours utiliser des divs
InformationsquelleAutor Ryan Peschel | 2012-06-03
  1. 26

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

    html {
  text-align: center;
}

    Une meilleure approche est d'avoir un intérieur div conteneur, qui seront centralisées, et non le corps.

    • C'est exactement ce qui a été demandé, pourquoi est-il descendre voté? jsfiddle.net/gA9La/2
    • Cela fonctionne parfaitement. Merci.
    • J'ai édité ma réponse. Voir la meilleure approche.
    • J'ai également eu à définir le corps de la propriété d'affichage pour que cela fonctionne: body {display: inline-block;}
    • Oui, c'est implicite (voir OP CSS).
    • Je pense que Grotesque réponse est beaucoup mieux que celui-ci. N'en déplaise Madara, mais sa réponse devrait être accepté et non pas la vôtre depuis votre proposition n'est pas la bonne façon de centre d'autres éléments que des textes.
    • L'exigence était de garder l'élément de large, le contenu, le Grotesque ne prend pas en compte, à tous. Ainsi, alors qu'il est probablement préférable d'utiliser le sien, il ne répond pas à la question, comme il a été demandé à tous.
    • Je vois ce que tu veux dire. Peut-être que je colle trop à la première phrase "je suis en train de centre de l'élément de corps sur ma page HTML." 🙂
    • aussi les "centres" tous les textes de contenu de la page, donc ne fonctionne pas bien.
    • Si vous ajoutez body { text-align: initial; } et sont bonnes pour y aller 🙂

    InformationsquelleAutor Madara Uchiha
  2. 30
        body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

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

    • Ouais, j'aime ça. Je ne voulais pas rendre le corps ont une largeur fixe.
    InformationsquelleAutor Freakishly
  3. 9

    Vous devez spécifier la largeur du corps de celui-ci au centre de la page.

    Ou mettre tout le contenu dans le div et le centre.

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

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

    • Hmm.. j'ai pensé que ce pourrait avoir été le cas, mais.. si je ne connais pas la taille à l'avance?
    • Utilisez ensuite un pourcentage
    • J'ai essayé de réglage de la largeur et de l'utilisation d'un pourcentage, mais aucun d'eux centrée sur le corps.
    • c'est quoi l' margin si vous êtes le tester avec juste texte ? le texte peut être centré avec juste text-align:center aussi.. vérifier : jsfiddle.net/gA9La/1
    • Non, je ne suis pas le centrage du texte. La plupart des éléments sont divs.
    InformationsquelleAutor SRN
  4. 3

    Pour ceux qui ne connaître la largeur, vous pourriez faire quelque chose comme

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

    Je suis également d'accord sur de ne pas fixer de text-align:center sur le corps, car il peut gâcher le reste de votre code et vous pourriez avoir à régler individuellement text-align:left sur beaucoup de choses, soit à l'époque ou dans l'avenir.

    InformationsquelleAutor DardanM