Dlaczego znacznik jest przestarzały w HTML?

Jestem po prostu ciekaw, dlaczego znacznik <center> W HTML został przestarzały.

<center> był prostym sposobem na szybkie wyśrodkowanie bloków tekstu i obrazów poprzez zamknięcie kontenera w znaczniku <center> i naprawdę nie mogę znaleźć prostszego sposobu, jak to zrobić teraz.

Zna ktoś jakiś prosty sposób na wyśrodkowanie "rzeczy" (nie margin-left:auto; margin-right:auto; i coś, co zastępuje <center>? A poza tym, dlaczego był przestarzały?

Author: Andreas Grech, 2009-11-25

12 answers

Element <center> został przestarzały, ponieważ definiuje prezentację jego zawartości - nie opisuje jego zawartości.

Jedną z metod centrowania jest ustawienie właściwości margin-left i margin-right elementu na auto, a następnie ustawienie właściwości text-align elementu nadrzędnego na center. Gwarantuje to, że element będzie wyśrodkowany we wszystkich nowoczesnych przeglądarkach.
 235
Author: Jordan Ryan Moore,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-16 16:37:04

Zgodnie z W3Schools.com ,

Element środkowy był przestarzały w HTML 4.01 i nie jest obsługiwany w XHTML 1.0 Strict DTD.

The HTML 4.01 spec podaje powód dezaktualizacji tagu:

Element CENTER jest dokładnie odpowiednikiem określenia elementu DIV z atrybutem align ustawionym na "center".

 17
Author: Conrad Meyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-07 17:04:02

To, co robię, to wykonywanie typowych zadań, takich jak centrowanie lub pływające i tworzenie klas CSS z nich. Kiedy to robię, mogę z nich korzystać na każdej ze stron. Mogę również zadzwonić tyle, ile chcę na ten sam element.

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

Teraz mogę używać ich w kodzie HTML do wykonywania prostych zadań.

<p class="text_center">Some Text</p>
 16
Author: Scott Radcliff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-26 04:11:07

Nadal używam znacznika

czasami, ponieważ nic w CSS nie działa również. Przykłady użycia sztuczki
I niepowodzenia:

<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>

otrzymuje wyniki. Aby użyć CSS zamiast tego, czasami musisz umieścić CSS w kilku miejscach i zadzierać z nim, aby go wyśrodkować. Odpowiadając na twoje pytanie, CSS stał się religią z wierzącymi i wyznawcami, którzy unikali
jako bluźnierstwa, bezbożności i zbyt prostego ze względu na ich własne bezpieczeństwo pracy. i jeśli spróbują odebrać ci , zapytaj ich, jaki jest CSS odpowiednik atrybutu colspan lub rowspan.

nie jest to abstrakcyjna czy książkowa prawda, ale żywa prawda, która się liczy.
-- Zen
 13
Author: Russell Hankins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-03 17:32:24

Możesz nadal używać tego z XHTML 1.0 Transitional i HTML 4.01 Transitional Jeśli chcesz. Jedyny inny sposób (moim zdaniem najlepszy) to z marginesami:

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

Twój HTML powinien definiować element, a nie regulować jego prezentację.

 11
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 18:03:29

HTML jest przeznaczony do strukturyzowania danych, a nie kontrolowania układu. CSS jest przeznaczony do sterowania układem. Przekonasz się również, że wielu projektantów marszczy brwi na używaniu <table> dla układów z tego samego powodu.

 8
Author: jkndrkn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 18:06:38

Chodzi o to, aby znaczniki, tj. znaczniki HTML, reprezentowały znaczenie i strukturę, a nie wygląd. To było źle wymieszane we wczesnych wersjach HTML, ale standardy ludzie próbują to wyczyścić teraz.

Jednym z problemów z pozwalaniem znacznikom kontrolować wygląd jest to, że Twoje strony nie grają dobrze z urządzeniami dla niepełnosprawnych, takimi jak czytniki ekranu. Prowadzi to również do posiadania wielu znaczników w tekście, które nie pomagają wyjaśnić znaczenia, ale raczej zaśmiecają go informacjami na innym poziomie.

Więc CSS został wymyślony, aby przenieść formatowanie/wyświetlanie do innego języka, który jest oddzielony od tekstu i może być łatwo utrzymany w ten sposób. Umożliwia to między innymi przełączanie arkuszy stylów w celu zmiany wyglądu strony internetowej bez dotykania innych znaczników. I aby móc to zrobić dla wielu stron w jednym puchnącym stopce.

Narzędzia, które CSS daje Ci do tego, nie zawsze są eleganckie, jestem po twojej stronie. Na przykład, nie ma sposobu, aby skuteczne centrowanie pionowe. A poziome centrowanie, jeśli nie jest tylko tekstem text-align, nie jest dużo lepsze.

Masz do wyboru Robienie łatwe, skuteczne i mętne lub czyste, eleganckie i uciążliwe. Nie rozumiem, dlaczego twórcy stron internetowych znosili ten bałagan, ale myślę, że są szczęśliwi, że mają przynajmniej szansę, aby zrobić swoje rzeczy.

 8
Author: Carl Smotricz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 18:09:55

Dla tekstu i obrazów można użyć text-align:

<div style="text-align: center;">
    I'm centered.
</div>
 6
Author: Tomas Markauskas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 18:06:44

Najmniej Popularna Odpowiedź

  1. przestarzały znacznik niekoniecznie jest znacznikiem złym;
  2. tam znaczniki, które zajmują się logiką prezentacji, center jest jednym z nich;
  3. A center tag nie jest taki sam jak div z text-align:center;
  4. fakt, że masz inny sposób na zrobienie czegoś, nie czyni tego nieważnym.

Pozwól mi wyjaśnić ponieważ są tutaj notoryczni downvoterzy, którzy będą myśleć, że bronię oldschool HTML4 czy coś. Wcale nie. Ale debata wokół center to po prostu wojna trendów, nie ma prawdziwego powodu, aby porzucić tag, który dobrze służy ważnemu celowi.

Zobaczmy więc główne argumenty przeciwko temu.
  • "opisuje prezentację, a nie semantykę!"
    Nie. Opisuje układ logiczny - i tak, ma domyślny wygląd, tak jak robią to inne tagi, takie jak <p> lub <ul>. Ale chodzi o stosunek części zamkniętej do jej otoczenie. Centrum mówi: "to jest coś, co oddzielamy przez wizualnie inne pozycjonowanie".

  • "to nie jest ważne"
    Tak. Jest po prostu przestarzały, ponieważ może zostać usunięty później. Od ponad 15 lat. I najwyraźniej nigdzie się nie wybiera. Są ważniejsze obiekty (m.in. google.com), które używają tego tagu, ponieważ jest bardzo czytelny i do rzeczy - i to są te same powody, dla których lubimy tagi HTML5 za.

  • "nie jest obsługiwany w HTML5"
    Jest to jeden z najczęściej wspieranych tagów . MDN mówi "jego użycie jest zniechęcające, ponieważ można go usunąć w dowolnym momencie" - słuszna uwaga, ale ten dzień może nigdy nie nadejść , cytując klasyka. Centrum było już przestarzałe w około 2004 roku - nadal tu jest i nadal jest przydatne.

  • "to oldschool"
    Sznurowadła też są oldschoolowe. Nowe metody nie unieważniają starego. Chcesz czuć się postępowo i nowocześnie: w porządku. Ale nie rób z tego prawa.

  • "to głupie / niewygodne / lamerskie / opowiada historię o tobie"
    Nic z tych rzeczy. To jak młotek: jedno narzędzie do konkretnego zadania. Istnieją inne narzędzia do tego samego zadania i inne zadania dla tego samego narzędzia; ale został stworzony, aby rozwiązać pewien problem i ten problem jest nadal wokół, więc równie dobrze możemy po prostu użyć dedykowanego rozwiązanie.

  • "nie powinieneś tego robić, ponieważ, CSS"
    Centrowanie można absolutnie osiągnąć za pomocą CSS, ale to tylko jeden sposób, nie jedyny, nie mówiąc już o jedynym odpowiednim . Wszystko, co jest obsługiwane, działające i czytelne powinno być w porządku. Również ten sam argument miał miejsce przed flexboxami i siatkami CSS, co jest zabawne, ponieważ wtedy nie było sposobu CSS na osiągnięcie tego, co zrobił center. Nie, text-align:center to nie to samo. Nie., To nie to samo. Każdy, kto argumentował przeciwko znacznikom centralnym przed flexbox, po prostu nie wiedział wystarczająco dużo o CSS.

TL; DR:

Jedynym powodem, aby nie używać <center> jest to, że ludzie będą cię nienawidzić.

 6
Author: dkellner,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-01 09:38:19

CSS ma właściwość text-align: center, a ponieważ jest to czysto wizualna rzecz, a nie semantyczna, należy ją zdegradować do CSS, a nie HTML.

 3
Author: keithjgrant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 18:07:13

Pokarm do myślenia: co zrobiłby syntezator tekstu na mowę z <center>?

 3
Author: Jörg W Mittag,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-25 23:52:34

Możesz dodać to do swojego css i użyć <div class="center"></div>

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

Lub jeśli chcesz zachować <center></center> i być przygotowanym na wypadek, gdyby został usunięty, dodaj to do swojego css

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}
 2
Author: SwiftNinjaPro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-17 20:19:32