Pourquoi la balise <center> est-elle déconseillée en HTML?


202

Je suis simplement curieux de savoir pourquoi <center> balise en HTML a été déconseillée.

Le <center>était un moyen simple de blocs rapidement alignement centre de texte et d' images en encapsulant le conteneur dans une <center>étiquette, et je ne peux pas trouver un moyen plus simple sur la façon de le faire maintenant.

Quelqu'un sait-il une façon simple de centrer les "trucs" (pas la margin-left:auto; margin-right:auto;chose et la largeur), quelque chose qui remplace <center>? Et aussi, pourquoi a-t-il été déprécié?

Réponses:


232

L' <center>élément est obsolète car il définit la présentation de son contenu - il ne décrit pas son contenu.

Une méthode de centrage consiste à définir les propriétés margin-leftet margin-rightde l'élément sur auto, puis à définir la propriété de l'élément parent text-alignsur center. Cela garantit que l'élément sera centré dans tous les navigateurs modernes.


7
Oui, CSS consiste à diviser la présentation et les données.
Ivan Nevostruev

3
Ivan, CSS est tout au sujet de la présentation; il ne s'agit pas de fractionner - comme le démontrent les attributs de style en ligne dans certaines réponses! C'est bien sûr une très bonne idée d'utiliser des classes sensées et non des CSS en ligne, mais c'est un concept distinct de l'utilisation des CSS pour la présentation.
Peter Boughton

15
J'ai eu quelques cas (dont je ne me souviens pas atm) où la définition de marginet text-alignn'a pas centré mon élément dans IE, mais le boucler avec <center>a fonctionné ... Je vais essayer de trouver un exemple.
Mottie

12
l'astuce de marge automatique ne fonctionne que pour les éléments de niveau bloc. utiliser display: block;sur un élément en ligne.
Steve Graham

88
Je suis sûr que les dix-sept divisions imbriquées sur un modèle WP ou Drupal typique aident vraiment à séparer les détails de la présentation: P </troll> (<- look, tag sémantique!)
detly

17

Selon W3Schools.com ,

L'élément central était obsolète dans HTML 4.01 et n'est pas pris en charge dans XHTML 1.0 Strict DTD.

La spécification HTML 4.01 donne cette raison pour déprécier la balise:

L'élément CENTER équivaut exactement à spécifier l'élément DIV avec l'attribut align défini sur "center".


14
J'aimerais tellement que ce soit vrai.
badp

61
C'est en fait vrai, mais l'attribut d'alignement de DIV est également déconseillé: D
Oleh Prypin

22
Notez que w3schools n'est pas W3C.
showdev

4
"L'élément CENTER équivaut exactement à spécifier l'élément DIV avec l'attribut align défini sur" center "." sauf qu'il est clair en regardant la balise qu'elle est centrée. Si c'était une raison valable, nous pourrions déprécier <strong>, <b>, toutes les balises <h> et autres et dire qu'ils font la même chose que <span> avec certains css. en outre, XHTML ne reconnaît même pas les balises HTML5 telles que le canevas. Il n'est déprécié que par la guerre contre les chapiteaux, les centres, les tables, les cadres qui sont purement religieux, car ils ont tous une place.
Dmitry

2
@Dmitry <strong> et <h> ont une signification sémantique qui va au-delà du style visuel. Je suppose que si <center> était toujours là, vous pourriez le styliser avec CSS, par exemple pour rendre son contenu justifié à gauche.
Nick Rice du

16

Ce que je fais, c'est prendre des tâches courantes comme le centrage ou le flottement et en faire des classes CSS. Lorsque je le fais, je peux les utiliser sur n'importe quelle page. Je peux aussi en appeler autant que je veux sur le même élément.

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

Maintenant, je peux les utiliser dans mon code HTML pour effectuer des tâches simples.

<p class="text_center">Some Text</p>

12

J'utilise toujours la balise <center> parfois parce que rien dans CSS ne fonctionne aussi bien. Exemples d'utilisation d'une astuce <div> et d'un échec:

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

<center> obtient des résultats. Pour utiliser CSS à la place, vous devez parfois mettre CSS à plusieurs endroits et jouer avec lui pour le centrer à droite. Pour répondre à votre question, le CSS est devenu une religion avec des croyants et des adeptes qui ont évité <center> <b> <i> <u> comme un blasphème, impie et beaucoup trop simple pour leur propre sécurité d'emploi. Et s'ils essaient de vous retirer votre <table>, demandez-leur quel est l'équivalent CSS de l'attribut colspan ou rowspan.

Ce n'est pas la vérité abstraite ou livresque, mais la vérité vécue qui compte.
- Zen


Vous pouvez également utiliserdisplay:flex; justify-content:center; text-align:center
Justin Liu

11

Vous pouvez toujours l'utiliser avec XHTML 1.0 Transitional et HTML 4.01 Transitional si vous le souhaitez. La seule autre façon (la meilleure façon, à mon avis) est avec des marges:

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

Votre code HTML doit définir l'élément et non régir sa présentation.


8

Il est prévu que le balisage, c'est-à-dire les balises HTML, représente le sens et la structure, pas l'apparence. Il a été mal mélangé dans les premières versions de HTML, mais les normes essaient de le nettoyer maintenant.

Le fait de laisser les balises contrôler l'apparence pose un problème: vos pages ne fonctionnent pas bien avec des appareils pour handicapés, tels que des lecteurs d'écran. Cela conduit également à avoir beaucoup, beaucoup de balises dans votre texte qui n'aident pas à clarifier le sens, mais l'encombrent plutôt avec des informations d'un niveau différent.

CSS a donc été conçu pour déplacer la mise en forme / l'affichage dans une langue différente, qui est distincte du texte et peut facilement être conservée de cette façon. Entre autres choses, cela permet de changer de feuille de style pour changer l'apparence d'une page Web sans toucher l'autre balisage. Et pour pouvoir faire ça pour beaucoup de pages en un seul coup de houle.

Les outils que CSS vous donne pour ce faire ne sont pas toujours élégants, je suis de votre côté. Par exemple, il n'y a aucun moyen d'effectuer un centrage vertical efficace. Et le centrage horizontal, s'il ne s'agit pas uniquement de texte text-align, n'est pas beaucoup mieux.

Vous avez le choix de faire facile, efficace et confus ou propre, élégant et encombrant. Je ne comprends pas pourquoi les développeurs Web supportent ce gâchis, mais je suppose qu'ils sont heureux d'avoir au moins une chance de faire leur travail.


4
+1: En tant que personne qui n'est même pas développeur Web, je reconnais à quel point il peut être difficile de spécifier certains attributs de présentation à l'aide de CSS. Je trouve toujours préférable d'utiliser CSS que d'embrouiller le balisage structurel, mais ... WTF? Qui est chargé de définir cette spécification CSS, des singes aléatoires qu'ils ont trouvés dans une jungle éloignée? Sérieusement.
Dan Moulding

2
S'il vous plaît, n'insultez pas des singes au hasard dans des jungles éloignées!
DaveWalley

7

HTML est destiné à structurer des données, pas à contrôler la mise en page. CSS est destiné à contrôler la mise en page. Vous constaterez également que de nombreux concepteurs désapprouvent l'utilisation <table>des mises en page pour cette même raison.


5

Pour le texte et les images, vous pouvez utiliser text-align:

<div style="text-align: center;">
    I'm centered.
</div>

1
Ces éléments sont appelés éléments en ligne.
Christoph Bühler

3

CSS a une text-align: centerpropriété, et puisque c'est purement visuel, pas sémantique, il devrait être relégué en CSS, pas en HTML.


1
+1 pour avoir expliqué pourquoi il était obsolète en plus d'une alternative.
moribvndvs

8
mais text-alignalignera le contenu du conteneur, pas le conteneur lui
Andreas Grech

Ah, oui, si c'est un élément de niveau bloc, le remplissage "auto" le fera. S'il s'agit d'un élément en ligne, utilisez-le text-align: centersur son élément parent.
keithjgrant

(oups, je voulais dire marge automatique, pas de remplissage)
keithjgrant

@AndreasGrech - <center>fait les deux . C'est énormément large.
Quentin

3

Matière à réflexion: que ferait un synthétiseur de synthèse vocale <center>?


1
Parlez probablement "centre" ou "centré".
DaveWalley

La même chose que pour le texte-align de CSS: center; Je suppose.
MSpreij

0

Vous pouvez l'ajouter à votre CSS et l'utiliser <div class="center"></div>

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

ou si vous souhaitez conserver <center></center>et être prêt au cas où il serait supprimé, ajoutez ceci à votre css

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

0

La réponse la moins populaire

  1. Une balise obsolète n'est pas nécessairement une mauvaise balise;
  2. Il y a des balises qui traitent de la logique de présentation,center est l'un d'entre eux;
  3. Une centerbalise n'est pas la même chose qu'une div avec text-align:center;
  4. Le fait que vous ayez une autre façon de faire quelque chose ne le rend pas invalide.

Permettez-moi de vous expliquer car il y a des downvoters notoires ici qui penseront que je défends HTML4 oldschool ou quelque chose. Non, je ne suis pas. Mais le débat autour centerest simplement une guerre de tendance, il n'y a aucune vraie raison de laisser tomber une étiquette qui sert bien un but valable.

Voyons donc les principaux arguments contre.

  • "Il décrit la présentation, pas la sémantique!"
    Non. Il décrit un arrangement logique - et oui a une apparence par défaut, tout comme les autres balises aiment<p>ou<ul>font. Mais le point est la relation de la partie fermée à son environnement. Le centre dit "c'est quelque chose que nous séparons par un positionnement visuellement différent".

  • "Ce n'est pas valable"
    Oui, c'est vrai. Il est juste obsolète, comme dans, pourrait être supprimé plus tard . Depuis 15+ ans maintenant. Et ça ne va nulle part, apparemment. Il existe des sites majeurs qui utilisent cette balise car elle est très lisible et précise.

  • "Il n'est pas pris en charge en HTML5"
    C'est en fait l'une desbalisesles plus largement prises en charge.

  • "C'est oldschool" Les
    lacets sont aussi oldschool. Les nouvelles méthodes n'invalident pas les anciennes. Vous voulez vous sentir progressif et moderne: bien. Mais n'en faites pas la loi.

  • "C'est stupide / maladroit / boiteux / raconte une histoire sur vous"
    Aucun de ceux-ci. C'est comme un marteau: un outil pour un travail spécifique. Il existe d'autres outils pour le même travail et d'autres travaux pour le même outil; mais il a été créé pour résoudre un certain problème et ce problème est toujours là donc nous pourrions aussi bien utiliser une solution dédiée.

  • "Vous ne devriez pas faire ça, parce que CSS" Le
    centrage peut absolument être réalisé par CSS mais ce n'est qu'une façon, pas la seule, encore moins la seule appropriée . Tout ce qui est pris en charge, fonctionnel et lisible devrait être correct à utiliser.

TL; DR:

La seule raison de ne pas l'utiliser <center>est que les gens vous détesteront.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.