Quelle est la meilleure façon de centre d'un contenu de la page à l'aide de css?

J'ai vu plusieurs méthodes pour la création simple d'une largeur fixe de colonne unique de mise en page à l'aide de CSS. J'ai comme l'on montré ici car il y a très peu de code et il fonctionne sur tous les navigateurs que j'ai essayé.

#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
}
<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

L'auteur mentionne qu'il a reçu quelques critiques. Je ne suis pas un développeur web, donc je voulais demander à la communauté ce qu'ils pensaient de cette approche. Plus particulièrement, est-il mieux/plus compatible façon d'accomplir cette?

J'ai été en utilisant cette approche, et elle fonctionne très bien... n'avons pas rencontré de problèmes avec cela.

OriginalL'auteur Lawrence Barsanti | 2010-01-07

  1. 16

    La "margin: 0 auto" est la meilleure façon de le faire, vous avez juste à être sûr d'avoir le bon doctype pour que cela fonctionne. J'ai toujours utiliser le XHTML strict autres sera trop de travail. Si vous n'avez pas un bon doctype, le contenu ne sera pas du centre dans IE6

    Pour mettre en œuvre le doctype XHTML strict, le mettre au-dessus de votre nœud, comme la première ligne de la page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    +1 pour la mention de la déclaration DOCTYPE. C'est nécessaire (c'est à dire au moins).
    +1 Vraiment sympa de répondre à James

    OriginalL'auteur

  2. 2

    margin: 0 auto; ( ou margin-left: auto; margin-right: auto; ), c'est vraiment la façon la plus simple., et il n'y a vraiment pas de problème avec les coller avec elle pour le centrage de contenu.

    Je suis de l'avis que la largeur de la balise doit être max-width: xxxpx. Pour ceux qui sont sur les navigateurs mobiles avec un petit 360px ou plus petite largeur, ils vont tout simplement obtenir le plus possible la taille de votre conteneur qui s'adapte à leur taille de l'écran (mais alors à l'intérieur de votre mise en page sera à l'échelle gracieusement trop.) Il est également à noter que max-width ne fonctionne pas sur IE6.

    OriginalL'auteur

  3. 2

    L'approche que vous avez décrit est celui que j'utilise. Je l'utilise depuis plusieurs années et il n'a pas let me down. Je ne peux pas penser à ce que les critiques seraient.

    OriginalL'auteur

  4. 1

    margin: 0 auto; est la meilleure méthode pour le centrage.

    L'auteur de l'article vous référence a déclaré que text-align: center; a été nécessaire pour soutenir IE5/Gagnant. Je pense que vous pouvez en toute sécurité ignorer ce que IE5 est bien et vraiment morts.

    OriginalL'auteur

  5. 1

    Je pense que c'est un mieux contourner.

    Ce sera centre d'une page entière de contenu lorsqu'ils sont contenus à l'intérieur de la div id="pagebox" de 600px de large.

    body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }

    Commentaires

    Spécifier un min-width pour la body aussi large que la pagebox élément lui-même.

    Cela empêche négatif (j'.e inaccesible) marges de gauche dans d'étroites fenêtres du navigateur lors de l'utilisation de Navigator 6+/Mozilla sous Windows.

    MSIE 5 n'a pas de centre basé sur auto la marge gauche/droite, mais "text-align:center" n'centre et au-dessus de la vrd.

    Espère que cela aide

    OriginalL'auteur

  6. 0

    Je trouve qu'il a une pratique courante d'utiliser margin: 0 auto; à centerise votre élément.

    Aussi le style des balises comme <center> sont déconseillés dans la version actuelle (HTML 4.01).

    OriginalL'auteur

  7. 0

    La meilleure façon de le faire est en effet de créer un div, disons, de 960px de large et donnant {margin: 0 auto;}.

    Ce que j'aime aussi à faire est de donner div certains {padding: 15px 0;}. De cette façon, le centré de la zone est en fait 990px qui est toujours parfaitement aligné au centre en 1024x768 moniteurs tandis que le rembourrage fournit un coussin, sur les bords pour les utilisateurs à l'aide de petits écrans ou Google Chrome.

    Et va une étape plus loin, j'ai réellement créateur d'une enveloppe de div qui ne prend toute la page et le centre d'un contenu de la div à l'intérieur. Cela me permet de profiter de choses comme un pied de page toujours des bâtons vers le bas de l'écran, indépendamment de la longueur du contenu (tels que http://ryanfait.com/sticky-footer/).

    OriginalL'auteur

  8. -9

    Honnêtement, je viens d'utiliser le <center> tag. C'est obsolète, je suppose (et vous obtenez des plaintes à ce sujet, probablement en fonction de votre doctype), mais il fonctionne.

    -- Edit

    Bien, les downvotes sur ce sont raisonnablement prévisible, mais j'espère que quelqu'un peut décrire exactement pourquoi (en dehors de pedanticness) cela ne fonctionne pas; parce que c'est ma compréhension, il fonctionne dans tous les navigateurs. Je peux me tromper 🙂

    Je suis étonné par votre capacité à tenir une rancune cletus 🙂
    vous avez juste allé à la no-no zone de la webbies 😉
    rock: Heh, C'est assez attendu, je suis juste un peu déçu par le manque de raisonnement logique (bien que cela semble généralement avec le css fanatiques :P)
    J'ai aussi bas vous ont voté 😉 pas pour mon soutien à css, mais en disant que c'est ok de ne pas aller de l'avant (en termes de compétences techniques). Surtout dans webbie monde, tout le monde est (encore) dans la douleur parce que le manque de standardisation et d'application de la loi.
    aussi, si vous en mesure de compiler de votre page d'accueil, votre compilateur va jeter erreur sur le manque de DocType " et " syntaxe incorrecte dans <head>. Mais ça n'arrive pas dans la programmation web 😉

    OriginalL'auteur