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?
12 answers
Element <center>
został przestarzały, ponieważ definiuje prezentację jego zawartości - nie opisuje jego zawartoś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.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".
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>
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
<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><div style="text-align: center;"> 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><div style="text-align: center;margin-left:auto;margin-right:auto"> still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with <center> tag</td></tr></table></center>
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ę.
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.
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.
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>
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ź
- przestarzały znacznik niekoniecznie jest znacznikiem złym;
- tam są znaczniki, które zajmują się logiką prezentacji,
center
jest jednym z nich; - A
center
tag nie jest taki sam jak div ztext-align:center
; - 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.
-
"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ć.
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.
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>
?
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;
}
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