CSS de remplacement pour les <div align=“center”>

Je sais que cette question a été posée de nombreuses fois, mais je n'ai jamais vu une réponse satisfaisante. Je veux dire, une réponse qui fonctionne réellement.

Donc, ici, nous allons à nouveau. Prendre cette jsFiddle: http://jsfiddle.net/KFMyn/3/

Si vous supprimez le align="center" du HTML, ce qui CSS devez-vous utiliser pour rendre le résultat de regarder le même que l'original?

Les réponses que je trouve habituellement montant de margin:0 auto et/ou text-align:center mais aucun de ceux qui ont l'effet désiré, de rendre le résultat de regarder le même que l'original.

  • Pourrait que la personne qui downvoted, veuillez expliquer si ils l'ont fait parce qu'ils pensent que la réponse est trop facile, si en essayant de trouver de bonnes solutions de rechange pour obsolète attributs est une perte de temps, ou quelque chose d'autre? Peut-être que mon anglais n'est pas assez bon?
  • Dans la spec HTML5, les articles 10.2 et 10.3.3 adresse de la manière dont les navigateurs sont attendus à la carte <div align="center"> du CSS. En bref, c'est surtout margin-right: auto; margin-left: auto et text-align: center, mais il y a certaines nuances.
InformationsquelleAutor Mr Lister | 2012-02-29
  1. 24

    Le texte aligner au centre couvre la plupart des éléments de texte, mais un peu supplémentaire est nécessaire pour centre d'aligner la table

    div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

    http://jsfiddle.net/NYuv8/4/

    • Je crois que c'est la seule façon d'aller. Je pense que l'objectif de la dépréciation align="center" était d'empêcher le centrage de texte à partir d'affecter la position d'un objet DOM dans le flux.
    • Sympa, mais pas très compatible avec tous les navigateurs. Les résultats ne sont pas identiques dans Firefox ou Chrome.
    • L'alignement dans les cellules de la table. Dans mon jsFiddle, le texte est aligné à gauche; dans le vôtre, centré.
    • J'ai fait des tests un peu plus, et c'est vraiment uniquement les tables qui ont besoin de soins spéciaux. Les autres éléments de bloc tous se comportent bien dans l'une centrée div. Et <div align="center">, elle aussi, ne se comportent pas de la même manière sur tous les navigateurs, donc il n'y a vraiment pas beaucoup plus que nous pouvons faire.
    InformationsquelleAutor Paul Sheldrake
  2. 2
    div {width:400px; text-align: center;}
table {display:inline-block;}​

    Devrait fonctionner aussi bien en plus de la réponse de Paul.

    http://jsfiddle.net/KFMyn/13/

    • Intéressant. Je n'étais pas au courant que le fait de donner la table un affichage différent de la valeur serait de garder la mise en page à l'intérieur intact. Je veux dire, j'ai toujours supposé que le <tr>s serait de commencer à se comporter comme s'ils n'étaient pas à l'intérieur d'un tableau. C'est intéressant d'expérimenter avec un peu! Mais encore, votre réponse ne donne pas exactement le même résultat que le code d'origine dans Firefox et Chrome.
    • Ah, vous avez raison - le tableau du contenu est également centré. J'ai oublié de mentionner que. Normalement, je voudrais utiliser la fonction auto marges de TBH. Un simple td {text-align:left; } devrait résoudre le problème, cependant.
    • Oui, mais n'est-ce pas vous mettre sur un sans cesse l'extension de chemin avec toujours plus de niveaux de réglage précis de votre CSS? Je veux dire, mon jsFiddle n'était qu'un petit exemple, mais que faire si vous avez un <blockquote> à l'intérieur de la <div>? Ensuite, vous auriez à mettre dans une ligne supplémentaire de CSS pour gérer cela. Etcetera. Mais j'espère qu'il y aura un vrai, finis solution, quelque chose que vous savait travailler en tant que 100% précis que l'attribut align. C'est ce que ma question est après.
    • Oh, je vois, j'ai encore eu div > * { margin: 0 auto; } dans ma page de test. Désolé. Maintenant, j'ai fait les choses avec des marges de leur propre ne sont plus un problème. Donc, c'est vraiment uniquement les tables qui causent des problèmes. Intéressant.
    InformationsquelleAutor Andre Loker
  3. 1
    div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

    Fonctionne pour moi. Mais cela peut ne pas fonctionner correctement lorsque vous avez plusieurs imbriquée des éléments du dom

    • Et n'aura aucun effet sur les éléments en position absolue.
    • Mais il n'a pas vraiment d'importance. Le positionnement absolu n'est pas un sujet de préoccupation soulevés par les OP, donc pas besoin de s'inquiéter à ce sujet.
    • Désolé, mais je voulais dire à ma question plus générale de se contenter d'appliquer à mon petit exemple. Afin de positionnement absolu ne compte pas.
    • Votre solution fonctionne presque sur jsFiddle, mais jsFiddle n'ont de ce massif de réinitialisation de la feuille de style qui définit toutes les marges à 0. Dans une situation du monde réel (où <p> et <ul> n'ont verticale des marges de), vous devez écrire margin-left:auto; margin-right:auto. Mais qui laisse la question de l'alignement dans le tableau.
    InformationsquelleAutor pduersteler
  4. 1
        margin: 0 auto; 
    text-align: center;

    Code ci-dessus peut ne pas fonctionner lorsque vous êtes en utilisant bootstrap grilles.
    Voici la solution rapide pour cela à l'aide de bootstrap 4 et IL FONCTIONNE DANS TOUS les NAVIGATEURS

    <div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

    vous pouvez mettre n'importe quelle colonne, comme le col-sm-2, 3, 4.......12

    De remplacement pour le Centre de balise dans différentes situations

    1. texte-centre
    Fonctionne avec p, un, bouton de, h balises et plus je.e toutes les balises contenant des données ou du texte directement

    2. Flex
    Il peut être utilisé pour aligner complète élément à l'intérieur d'un autre élément, cependant, il a plus d'utilitaires de vérifier la documentation de référence

    Utilisation peut centrer les éléments à l'aide de flex dans une des manières suivantes

    display:flex;
justify-content:center;
align-items:center;

    Une autre importation de biens est flex-direction je.e

    flex-direction:column
flex-direction:row

    Utiliser flex direction selon le type d'alignement que vous voulez

    3. mx-auto (classe de bootstrap)

    InformationsquelleAutor Nishant Singh
  5. 0

    Vous pouvez essayer et le style de la table, comme ceci:

    div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}
    InformationsquelleAutor walmik
  6. -1

    Pourquoi ne pas simplement laisser
    <div align="center">
    Il fonctionne toujours très bien avec tous les navigateurs pour autant que je sais. J'ai beaucoup de vieux html et j'ai eu à ce fil uniquement parce que mon NetBeans IDE est d'avertissement de moi, c'est obsolète. Ma conjecture est que les navigateurs sont à traduire automatiquement à la bonne solution. Même chose avec
    <font size="6">bla bla</font>
    fonctionne toujours et probablement automatiquement converties en
    <span style="font-size:36px">bla bla</span>

    • Assurez-vous qu'il fonctionne toujours, mais officiellement, construit comme ça peut cesser de fonctionner à tout moment. De plus, les choses ne fonctionnent pas de la même façon dans tous les navigateurs. Voir mes propres pages sur les éléments obsolètes et obsolète attributs pour des exemples de différences, vous pouvez vous attendre. Des différences qui n'existent pas lorsque vous utilisez des feuilles de style CSS.
    InformationsquelleAutor Stephane Lapointe
  7. -1
    div { width: 400px; text-align: center; }
table { display: inline-block; }

    Cela devrait fonctionner. Vérifier exemple ici: http://jsfiddle.net/ye7ngd3q/2/

    et si vous voulez des éléments à l'intérieur d'une cellule de tableau à gauche/à droite aligné ensuite, vous pouvez définir des classes et de l'attribuer à l'élément, respectivement, comme indiqué ci-dessous:

    HTML

    <div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

    CSS

    div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }
    • Donner une table à une autre valeur d'affichage a les plus terribles effets secondaires. En outre, il n'est pas nécessaire à tous; voir également accepté de répondre à partir de 6 ans.
    InformationsquelleAutor sikrigagan