wake-up-neo.com

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

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

Der <center> War eine einfache Möglichkeit, Text- und Bildblöcke schnell in der Mitte auszurichten, indem der Container in ein <center> - Tag gekapselt wurde, und ich kann jetzt wirklich keinen einfacheren Weg finden, dies zu tun.

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

196
Andreas Grech

Das Element <center> Wurde verworfen, weil es das Präsentation seines Inhalts definiert - es beschreibt seinen Inhalt nicht.

Eine Methode zum Zentrieren besteht darin, die Eigenschaften margin-left Und margin-right Des Elements auf auto und dann die Eigenschaft text-align Des übergeordneten Elements auf center. Dies garantiert, dass das Element in allen modernen Browsern zentriert wird.

224

Bei HTML geht es darum, dem Inhalt Struktur und Bedeutung bereitzustellen, und dies sollte seine einzige Funktion sein.

Es gibt jedoch verschiedene Tags, die in der Vergangenheit von dummen Browser-Entwicklern hinzugefügt wurden und gegen dieses Grundprinzip verstoßen.

Irgendwann kamen die Leute zur Besinnung (zumindest teilweise) und begannen (zu versuchen), sich auf eine Spezifikation zum Schreiben von korrektem HTML zu einigen, so dass sie einige dieser Tags ablehnten.

Der Schaden ist jedoch bereits angerichtet worden - zu viele Leute haben HTML gelernt, indem sie "Tags um Dinge und Dinge setzen", anstatt den (wichtigen und nützlichen) Unterschied zwischen Semantik und Präsentation zu verstehen, und diese Leute haben Bücher geschrieben und ein Tutorial, in dem anderen Menschen die falsche Art und Weise beigebracht wird, HTML zu schreiben, die selbst dasselbe getan haben, und wir sind mit einem richtigen alten Durcheinander fertig geworden.

Im Idealfall hätte das center -Tag nie existieren dürfen, da die Leute darauf hingewiesen haben sollten, dass es sich nicht um 'echtes' HTML handelt, und die Browser-Hersteller angewiesen haben, zurück zu gehen und es richtig zu machen.


Und um es richtig zu machen ... Alignment ist natürlich ein Präsentationsproblem - Anwenden von Layout und Formatierung auf (strukturierten) Inhalt - und die dafür zu verwendende Sprache ist CSS .

Aber auch hier haben dumme Browser-Entwickler frühzeitig CSS vermasselt - und in vielen Fällen mussten Leute, die Webseiten erstellen, falsches HTML verwenden, weil das CSS einfach nicht funktionierte.

In diesen Tagen werden wir damit beginnen, einige nützliche Funktionen zu CSS hinzuzufügen, aber es gibt immer noch eine Menge, die nicht implementiert ist, und eine ganze Reihe von Dingen Das hätte weit überlegen implementiert werden können, ist aber jetzt standardisiert, sodass wir bei den alten Methoden bleiben.

Wenn Stylesheets von vernünftigen Leuten implementiert worden wären, hätten Sie alle Steuerelemente, die Sie in einer anständigen Office-Software haben - zum Ausrichten von Blöcken und Text würde es horizontal, vertikal, auf dem Kopf stehend, gedreht usw. funktionieren - und so weiter würde nicht auf die blöde Weise gemacht werden, linke/rechte Ränder auf auto zu setzen.


Der Vollständigkeit halber werde ich schnell die dritte "Ebene" für Webseiten hinzufügen, die das Hinzufügen von Interaktivität zu einer ansonsten statischen Seite behandelt, die natürlich die (falsch benannte) ist ) JavaScript.

Wieder einmal wussten diese dummen Browser-Entwickler nicht, was sie taten. Sie wählten (aus Marketinggründen) einen völlig ungenauen/ungültigen Namen und durchsuchten erneut eine potenziell große und mächtige Sprache mit Fehlern, mangelnder Funktionalität und schufen etwas, das (bis vor kurzem) von vielen Menschen gehasst wurde.

Wir haben natürlich in den letzten Jahren einen großen Aufstand von JavaScript-Bibliotheken erlebt, die dazu beigetragen haben, einige der coolen Dinge zu zeigen, zu denen JS seit Jahren in der Lage ist, viele der Browser-Schwachstellen, die immer noch in den Browsern existieren, zu verbergen Teilweise hat es geholfen, die CSS-Unterstützung zu verbessern, sodass sie etwas nützlicher ist (es fehlen jedoch noch viele Dinge).


Also ja, um all das zusammenzufassen, die ultimative Antwort ist, dass Browser-Hersteller dumm waren. :)

74
Peter Boughton

Was ich tue, ist, allgemeine Aufgaben wie das Zentrieren oder Schweben zu übernehmen und daraus CSS-Klassen zu machen. Wenn ich das tue, kann ich sie auf allen Seiten verwenden. Ich kann auch so viele anrufen, 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>
16
Scott Radcliff

Nach W3Schools.com ,

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

Die HTML 4.01-Spezifikation gibt den Grund für die Nichtbeachtung des Tags an:

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

16
Conrad Meyer

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) ist mit Rändern:

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

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

10
Sampson

Ich benutze manchmal immer noch das <center> -Tag, weil in CSS auch 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> liefert Ergebnisse. Um stattdessen CSS zu verwenden, müssen Sie CSS manchmal an mehreren Stellen platzieren und damit herumspielen, damit es richtig zentriert wird. Zur Beantwortung Ihrer Frage, CSS ist 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 Attributs colspan oder rowspan ist.

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

9
Russell Hankins

Es ist beabsichtigt, dass Markups, d. H. HTML-Tags, Bedeutung und Struktur repräsentieren, nicht das Erscheinungsbild. In früheren HTML-Versionen war das stark durcheinander, aber die Standards, die die Leute versuchen, das jetzt zu bereinigen.

Ein Problem bei der Steuerung des Erscheinungsbilds von Tags besteht darin, dass Ihre Seiten mit Geräten für Behinderte, z. B. Bildschirmleseprogrammen, 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 die Informationen auf einer anderen Ebene enthalten.

Aus diesem Grund wurde CSS entwickelt, um die Formatierung/Anzeige in eine andere Sprache zu verschieben, die vom Text getrennt ist und auf diese Weise einfach beibehalten werden kann. Auf diese Weise können Sie unter anderem das Erscheinungsbild einer Webseite durch Ändern von Stylesheets ändern, ohne das andere Markup zu berühren. Und das für viele Seiten in einem Schwung.

Die Tools, die CSS Ihnen dazu bietet, sind nicht immer elegant, ich bin auf Ihrer Seite. Eine effektive vertikale Zentrierung ist beispielsweise nicht möglich. Und horizontale Zentrierung, wenn es sich nicht nur um Text handelt, der text-align, ist nicht viel besser.

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

8
Carl Smotricz

HTML dient zur Strukturierung von Daten, nicht zur Steuerung des Layouts. CSS soll das Layout steuern. Sie werden auch feststellen, dass viele Designer aus dem gleichen Grund <table> Für Layouts missbilligen.

6
jkndrkn

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

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

Denkanstoß: Was würde ein Text-zu-Sprache-Synthesizer mit <center> Machen?

3
Jörg W Mittag

CSS hat ein text-align: center -Eigenschaft, und da dies eine rein visuelle, nicht semantische Sache ist, sollte sie nicht in HTML, sondern in CSS verwiesen werden.

3
keithjgrant

Es wurde zusammen mit anderen Tags wie <font> Als Gestaltungselement verworfen. Es definiert nicht, was ein Element ist, sondern ändert sein Aussehen. W3C wollte, dass HTML5-Elemente nur Elemente definieren, und entfernte alle Gestaltungselemente, damit die gesamte Gestaltung im CSS oder <style> Der Seite erfolgt.

Eine schnelle Lösung:

    <style> 

      .element {
         position: relative;
         left: 50%;
         -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
         transform: translateX(-50%);
      }

    </style>
1
KSL

IMO-Center-Tags funktionieren in einigen Bereichen einwandfrei und funktionieren seit der Geburt von HTML und werden noch viele Jahre funktionieren.

Sicher, es gibt andere Möglichkeiten zum Zentrieren. Die meisten funktionieren nicht so gut wie ein Center-Tag. Beachten Sie auch, dass beim Zentrieren von Objekten innerhalb eines Center-Tags in den meisten Fällen ein Zeilenumbruch vor und nach dem Center-Tag auftritt.

1
Deathstalker

Wenn Sie eine alte Website mit Center-Tag aktualisieren, funktioniert die folgende Lösung in vielen Fällen möglicherweise nicht

die Methode zum Zentrieren besteht darin, die Eigenschaften margin-left und margin-right des Elements auf auto zu setzen und dann die Textausrichtungseigenschaft des übergeordneten Elements auf center zu setzen.

Die folgende Methode gibt Ihnen das genaue Äquivalent für tag:

.center{
    text-align: center;
    display: inherit;
}

.center > div { /* It is the fix if there are any div tag inside center tag */
    margin-left: auto;
    margin-right: auto;
}
<span class="center">
Content
</span>

starker Text

0