Warum ist das <center> -Tag in HTML veraltet?

202

Ich bin nur neugierig, warum das <center>Tag in HTML veraltet war.

Das <center>war eine einfache Möglichkeit, Text- und Bildblöcke schnell mittig auszurichten, indem der Container in ein <center>Tag eingekapselt wurde , und ich kann wirklich keine einfachere Möglichkeit finden, dies jetzt zu tun.

Kennt jemand einen einfachen Weg, wie man "Zeug" zentriert (nicht das margin-left:auto; margin-right:auto;und die Breite), etwas, das ersetzt <center>? Und warum wurde es veraltet?

Andreas Grech
quelle

Antworten:

232

Das <center>Element war veraltet, weil es die Darstellung seines Inhalts definiert - es beschreibt seinen Inhalt nicht.

Eine Methode zum Zentrieren besteht darin, die Eigenschaften margin-leftund margin-rightdes Elements auf autound anschließend die Eigenschaft des übergeordneten Elements auf text-alignfestzulegen center. Dies garantiert, dass das Element in allen modernen Browsern zentriert wird.

Jordan Ryan Moore
quelle
7
Ja, bei CSS dreht sich alles um die Aufteilung von Präsentation und Daten.
Ivan Nevostruev
3
Ivan, CSS dreht sich alles um Präsentation; Es geht nicht um das Teilen - wie die Inline-Stilattribute in einigen Antworten hier zeigen! Es ist natürlich eine sehr gute Idee, sinnvolle Klassen und kein Inline-CSS zu verwenden, aber das ist ein anderes Konzept als die Verwendung von CSS für Präsentationen.
Peter Boughton
15
Ich hatte einige Fälle (an die ich mich nicht erinnern kann), in denen das Setzen von marginund text-aligndas Zentrieren meines Elements im IE <center>nicht funktioniert haben , aber das Umschließen mit hat funktioniert ... Ich werde versuchen, ein Beispiel zu finden.
Mottie
12
Der automatische Randtrick funktioniert nur für Elemente auf Blockebene. Verwendung display: block;für ein Inline-Element.
Steve Graham
88
Ich bin sicher, dass die siebzehn verschachtelten Divs auf einer typischen WP- oder Drupal-Vorlage wirklich dazu beitragen, die Präsentationsdetails zu trennen: P </ control> (<- Look, semantisches Tag!)
Detly
17

Nach W3Schools.com ,

Das Center-Element war in HTML 4.01 veraltet und wird in XHTML 1.0 Strict DTD nicht unterstützt.

Die HTML 4.01-Spezifikation gibt diesen Grund für die Ablehnung des Tags an:

Das CENTER-Element entspricht genau der Angabe des DIV-Elements, wobei das align-Attribut auf "center" gesetzt ist.

Conrad Meyer
quelle
14
Ich so wünschte , das war tatsächlich wahr.
Badp
61
Dies ist tatsächlich wahr, aber DIVs Align-Attribut ist ebenfalls veraltet: D
Oleh Prypin
22
Beachten Sie, dass w3schools nicht W3C ist.
Showdev
4
"Das CENTER-Element entspricht genau der Angabe des DIV-Elements, wobei das align-Attribut auf" center "gesetzt ist." außer es ist klar, wenn man sich das Tag ansieht, dass es zentriert ist. Wenn dies ein gültiger Grund wäre, könnten wir <strong>, <b>, alle <h> und andere Tags berauben und sagen, dass sie mit einigen CSS dasselbe tun wie <span>. Außerdem erkennt XHTML nicht einmal HTML5-Tags wie Canvas. Es wird nur wegen des Krieges gegen Zelte, Zentren, Tische und Rahmen abgelehnt, der rein religiös ist, da sie alle einen Platz haben.
Dmitry
2
@Dmitry <strong> und <h> haben eine semantische Bedeutung, die über das visuelle Styling hinausgeht. Ich denke, wenn <center> noch in der Nähe wäre, könnten Sie es mit CSS formatieren, z. B. um den Inhalt zu rechtfertigen.
Nick Rice
16

Was ich tue, ist, allgemeine Aufgaben wie Zentrieren oder Schweben zu übernehmen und daraus CSS-Klassen zu machen. Wenn ich das mache, kann ich sie auf allen Seiten verwenden. Ich kann auch so viele aufrufen, wie ich möchte.

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

Jetzt kann ich sie in meinem HTML-Code verwenden, um einfache Aufgaben auszuführen.

<p class="text_center">Some Text</p>
Scott Radcliff
quelle
12

Manchmal verwende ich immer noch das <center> -Tag, da auch in CSS nichts funktioniert. Beispiele für den Versuch, einen <div> -Trick zu verwenden, und das Scheitern:

<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> erzielt Ergebnisse. Um stattdessen CSS zu verwenden, müssen Sie CSS manchmal an mehreren Stellen platzieren und damit herumspielen, damit es richtig zentriert wird. Um Ihre Frage zu beantworten, ist CSS zu einer Religion mit Gläubigen und Anhängern geworden, die <center> <b> <i> <u> als Gotteslästerung, unheilig und viel zu einfach für ihre eigene Arbeitsplatzsicherheit gemieden haben. Und wenn sie versuchen, Ihnen Ihre <Tabelle> wegzunehmen, fragen Sie sie, was das CSS-Äquivalent des Colspan- oder Rowspan-Attributs ist.

Es ist nicht die abstrakte oder buchstäbliche Wahrheit, sondern die gelebte Wahrheit, die zählt.
- Zen

Russell Hankins
quelle
Sie könnten auch verwendendisplay:flex; justify-content:center; text-align:center
Justin Liu
11

Sie können dies weiterhin mit XHTML 1.0 Transitional und HTML 4.01 Transitional verwenden, wenn Sie möchten. Der einzige andere Weg (meiner Meinung nach der beste Weg) ist mit Rändern:

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

Ihr HTML-Code sollte das Element definieren und nicht dessen Darstellung steuern.

Sampson
quelle
8

Es ist beabsichtigt, dass Markups, dh die HTML-Tags, Bedeutung und Struktur darstellen, nicht das Erscheinungsbild. Es war in frühen Versionen von HTML stark durcheinander, aber die Standards, die die Leute jetzt versuchen, das zu bereinigen.

Ein Problem bei der Steuerung des Erscheinungsbilds von Tags besteht darin, dass Ihre Seiten mit Geräten für Behinderte wie Bildschirmlesegeräten nicht gut funktionieren. Es führt auch dazu, dass Ihr Text viele, viele Tags enthält, die nicht dazu beitragen, die Bedeutung zu verdeutlichen, sondern sie mit Informationen einer anderen Ebene überladen.

Daher wurde CSS entwickelt, um die Formatierung / Anzeige in eine andere Sprache zu verschieben, die vom Text getrennt ist und auf diese Weise problemlos beibehalten werden kann. Dies ermöglicht unter anderem das Wechseln von Stylesheets, um das Erscheinungsbild einer Webseite zu ändern, ohne das andere Markup zu berühren. Und das für viele Seiten in einem Swell Foop.

Die Tools, die CSS Ihnen dazu bietet, sind nicht immer elegant, ich bin auf Ihrer Seite. Zum Beispiel gibt es keine Möglichkeit, eine effektive vertikale Zentrierung durchzuführen. Und horizontale Zentrierung text-alignist nicht viel besser , wenn sie nicht nur für Text geeignet ist.

Sie haben die Wahl zwischen einfach, effektiv und durcheinander oder sauber, elegant und umständlich. Ich verstehe nicht, warum Webentwickler dieses Durcheinander ertragen, aber ich denke, sie sind froh, zumindest eine Chance zu haben, ihre Sachen zu erledigen.

Carl Smotricz
quelle
4
+1: Als jemand, der nicht einmal ein Webentwickler ist, erkenne ich, wie umständlich es sein kann, bestimmte Präsentationsattribute mithilfe von CSS anzugeben. Ich finde es immer noch besser, CSS zu verwenden, als das strukturelle Markup durcheinander zu bringen, aber ... WTF? Wer ist verantwortlich für die Definition dieser CSS-Spezifikation, zufälliger Affen, die sie in einem abgelegenen Dschungel gefunden haben? Ernsthaft.
Dan Moulding
2
Bitte beleidigen Sie keine zufälligen Affen in abgelegenen Dschungeln!
DaveWalley
7

HTML dient zur Strukturierung von Daten und nicht zur Steuerung des Layouts. CSS soll das Layout steuern. Sie werden auch feststellen, dass viele Designer aus <table>demselben Grund die Verwendung von Layouts missbilligen.

jkndrkn
quelle
5

Für Text und Bilder können Sie verwenden text-align:

<div style="text-align: center;">
    I'm centered.
</div>
Tomas Markauskas
quelle
1
Diese werden Inline-Elemente genannt.
Christoph Bühler
3

CSS hat eine text-align: centerEigenschaft, und da dies eine rein visuelle und keine semantische Sache ist, sollte es auf CSS und nicht auf HTML verwiesen werden.

keithjgrant
quelle
1
+1 für die Erklärung, warum es zusätzlich zu einer Alternative veraltet war.
moribvndvs
8
aber text-alignwird den Inhalt des Containers ausrichten, nicht den Container selbst
Andreas Grech
Ah, ja, wenn es sich um ein Element auf Blockebene handelt, reicht das "automatische" Auffüllen aus. Wenn es sich um ein Inline-Element handelt, verwenden Sie es text-align: centerfür das übergeordnete Element.
Keithjgrant
(Ups, ich meinte Auto-Rand, nicht Polsterung)
keithjgrant
@AndreasGrech - <center>macht beides . Es ist ärgerlich breit.
Quentin
3

Denkanstöße: Womit würde ein Text-zu-Sprache-Synthesizer umgehen <center>?

Jörg W Mittag
quelle
1
Sprechen Sie wahrscheinlich "zentriert" oder "zentriert".
DaveWalley
Das gleiche wie bei CSS 'Text-Align: Center; Ich nehme an.
MSpreij
0

Sie können dies zu Ihrem CSS hinzufügen und verwenden <div class="center"></div>

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

oder wenn Sie behalten <center></center>und vorbereitet sein möchten, falls es jemals entfernt wird, fügen Sie dies Ihrem CSS hinzu

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

Die am wenigsten beliebte Antwort

  1. Ein veraltetes Tag ist nicht unbedingt ein schlechtes Tag.
  2. Es gibt Tags, die sich mit Präsentationslogik befassen, centerist eines davon;
  3. Ein centerTag ist nicht dasselbe wie ein div mit text-align:center;
  4. Die Tatsache, dass Sie eine andere Möglichkeit haben, etwas zu tun, macht es nicht ungültig.

Lassen Sie mich das erklären, denn hier gibt es berüchtigte Downvoter, die glauben, ich verteidige HTML4 der alten Schule oder so. Nein, bin ich nicht. Aber die Debatte centerist einfach ein Trendkrieg, es gibt keinen wirklichen Grund, ein Etikett fallen zu lassen, das einem gültigen Zweck gut dient.

Schauen wir uns also die Hauptargumente dagegen an.

  • "Es beschreibt Präsentation, nicht Semantik!"
    Nein. Es beschreibt eine logische Anordnung - und ja hat ein Standard-Erscheinungsbild, genau wie andere Tags mögen<p>oder<ul>tun. Der Punkt ist jedoch die Beziehung des eingeschlossenen Teils zu seiner Umgebung. Das Zentrum sagt, "dies ist etwas, was wir durch visuell unterschiedliche Positionierung trennen".

  • "Es ist nicht gültig"
    Ja, das ist es. Es ist nur veraltet, wie in, könnte später entfernt werden . Seit mehr als 15 Jahren. Und es geht anscheinend nirgendwo hin. Es gibt große Websites, die dieses Tag verwenden, da es sehr gut lesbar und auf den Punkt gebracht ist.

  • "Es wird in HTML5 nicht unterstützt"
    Esist tatsächlicheines der am häufigsten unterstützten Tags.

  • "It's oldschool"
    Schnürsenkel sind auch oldschool. Neue Methoden machen die alten nicht ungültig. Sie möchten sich progressiv und modern fühlen: gut. Aber mach es nicht zum Gesetz.

  • "Es ist dumm / umständlich / lahm / erzählt eine Geschichte über dich"
    Keine davon. Es ist wie ein Hammer: ein Werkzeug für einen bestimmten Job. Es gibt andere Tools für denselben Job und andere Jobs für dasselbe Tool. Aber es wurde erstellt, um ein bestimmtes Problem zu lösen, und dieses Problem gibt es immer noch, sodass wir genauso gut eine dedizierte Lösung verwenden können.

  • "Sie sollten dies nicht tun, weil CSS" Die
    Zentrierung kann absolut durch CSS erreicht werden, aber das ist nur eine Möglichkeit, nicht die einzige, geschweige denn die einzig geeignete . Alles, was unterstützt, funktioniert und lesbar ist, sollte in Ordnung sein.

TL; DR:

Der einzige Grund, nicht zu verwenden, <center>ist, weil die Leute dich hassen werden.

dkellner
quelle