web-dev-qa-db-fra.com

Remplacement pour <centre>

Cela a déjà été demandé par d'autres personnes, mais je n'ai jamais vu de réponse satisfaisante. Existe-t-il un remplacement valide à la balise <center>? 

Je sais qu'il existe margin: 0 auto;, mais cela nécessite de définir une largeur. Il y a aussi align="center", mais je crois que c'est aussi un code invalide. 

Y at-il quelque chose d'aussi simple que <center> qui est valide? Dans de rares cas, je finis toujours par l'utiliser, même s'il est déconseillé. Aujourd’hui, j’ai fini par utiliser un <center> pour centrer le bouton qui devait être centré sur une page Web. Oui, j'aurais pu définir la largeur et lui donner margin: 0 auto, mais c'est beaucoup de travail pour centrer un seul élément et cela salit mon code, que je suis fier de garder en ordre. Je ne comprends pas vraiment pourquoi <center> est devenu obsolète si rien ne l'a remplacé.

Merci!

htmlcssdeprecated
22
JacobTheDev

text-align: center est ce que vous devriez utiliser. En fait, le moyen idéal est le suivant:

.center {
    text-align: center;
}
.center > div, .center > table /* insert any other block-level elements here */ {
    margin-left: auto;
    margin-right: auto;
}

De toute évidence, ce n'est pas aussi simple que vous pourriez l'espérer.

Personnellement, je viens d'utiliser:

.center {text-align: center;}
.tmid {margin: 0px auto;}

Ensuite, appliquez des classes si nécessaire.

26
Niet the Dark Absol

Ce n'est pas si facile de centrer des éléments sans la balise center.

Pour cela, vous devez créer une solution de contournement qui fonctionne même dans IE6:

Vous avez besoin d'un wrapper div autour de l'élément que vous voulez centrer et utilisez text-align:center; width:100%. Dans cette div, vous placez un autre div et définissez margin en auto et text-align:left;

<div style="text-align:center; width:100%">
    <div style="margin:auto; text-align:left;">
        This Container is centered
    </div>
</div>

Si vous voulez juste centrer le texte, vous pouvez utiliser <p style="text-align:center;"></p>

C'est le noyau. Pour simplifier la chose, vous pouvez utiliser une classe pour cela (comme l'a écrit Kolink):

CSS:

.center {
    text-align:center;
    width:100%;
}
.center:first-child { //doesn't work in IE 6
    margin:auto;
    text-align:left;
}

HTML:

<div class="center">
    <div>
        This Container is centered
    </div>
</div>
7
WolvDev

pour centrer les éléments, j'utilise ceci:

.middlr {
   display: block;
   margin: auto;
}

fonctionne pour chaque élément. travaille pour moi.

1
ryanwaite28

Remplacement de l'étiquette centrale: ( Vous devriez faire les deux )

Utilisez ce style pour l'élément parent:

text-align: center;

Utilisez ce style pour l'élément en cours:

marge-gauche: auto; marge-droite: auto;

0
gnath

La raison pour laquelle <center> est obsolète est qu’il ne s’agit pas d’une balise sémantique, mais plutôt d’une présentation et que nous devrions éviter d’utiliser quoi que ce soit en HTML qui n’est pas de nature sémantique.

C’est la même raison pour laquelle d’autres éléments de présentation tels que <b>, <i>, etc. ont été déconseillés, car il existe des moyens d’obtenir la même chose dans le CSS.

0
Mat Richardson
.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
* > .centered {
  text-align: center !important;
  display: block;
}
0
Vino