Mengapa tag <center> tidak digunakan lagi dalam HTML?

202

Saya hanya ingin tahu mengapa <center>tag dalam HTML tidak digunakan lagi.

Itu <center>adalah cara sederhana dengan cepat menyelaraskan blok teks dan gambar dengan merangkum wadah dalam <center>tag, dan saya benar-benar tidak dapat menemukan cara yang lebih sederhana tentang cara melakukannya sekarang.

Adakah yang tahu cara sederhana bagaimana memusatkan "barang" (bukan margin-left:auto; margin-right:auto;benda lebar), sesuatu yang menggantikan <center>? Dan juga, mengapa itu ditinggalkan?

Andreas Grech
sumber

Jawaban:

232

The <center>elemen itu ditinggalkan karena mendefinisikan presentasi dari isinya - itu tidak menggambarkan isinya.

Salah satu metode pemusatan adalah untuk mengatur margin-leftdan margin-rightproperti elemen ke auto, dan kemudian mengatur text-alignproperti elemen induk ke center. Ini menjamin bahwa elemen tersebut akan dipusatkan di semua browser modern.

Jordan Ryan Moore
sumber
7
Ya, CSS adalah tentang membagi presentasi dan data.
Ivan Nevostruev
3
Ivan, CSS adalah tentang presentasi; ini bukan tentang pemisahan - seperti atribut gaya inline dalam beberapa jawaban di sini menunjukkan! Tentu saja merupakan ide yang sangat bagus untuk menggunakan kelas yang masuk akal dan bukan inline CSS, tetapi itu adalah konsep yang berbeda untuk menggunakan CSS untuk presentasi.
Peter Boughton
15
Saya punya beberapa kasus (yang saya tidak ingat atm) di mana pengaturan kedua margindan text-aligntidak memusatkan elemen saya di IE, tetapi membungkusnya dengan <center>berhasil ... Saya akan mencoba untuk menemukan contoh.
Mottie
12
trik margin otomatis hanya berfungsi untuk elemen level blok. gunakan display: block;pada elemen inline.
Steve Graham
88
Saya yakin tujuh belas div bersarang pada WP atau Drupal template benar-benar membantu untuk memisahkan detail presentasi: P </troll> (<- lihat, tag semantic!)
detly
17

Menurut W3Schools.com ,

Elemen tengah sudah ditinggalkan dalam HTML 4.01, dan tidak didukung dalam XHTML 1.0 DTD Ketat.

The HTML 4.01 spesifikasi memberi alasan ini untuk mencela tag:

Elemen CENTER persis sama dengan menentukan elemen DIV dengan atribut align yang diatur ke "center".

Conrad Meyer
sumber
14
Saya sangat berharap ini benar.
badp
61
Ini sebenarnya benar, tetapi atribut align DIV juga tidak digunakan lagi: D
Oleh Prypin
22
Perhatikan bahwa w3schools bukan W3C.
showdev
4
"Elemen PUSAT persis sama dengan menentukan elemen DIV dengan atribut align yang diatur ke" center "." kecuali jelas dengan melihat tag yang dipusatkan. Jika ini alasan yang sah, kami dapat mencabut <strong>, <b>, semua <h> dan tag lainnya dan mengatakan bahwa mereka melakukan hal yang sama seperti <span> dengan beberapa css. selain itu, XHTML bahkan tidak mengenali tag HTML5 seperti kanvas. Itu hanya ditinggalkan karena perang melawan marquee, pusat, meja, bingkai yang murni religius, karena mereka semua memiliki tempat.
Dmitry
2
@Dmitry <strong> dan <h> memiliki makna semantik yang melampaui gaya visual. Saya kira jika <pusat> masih ada, Anda dapat menatanya dengan CSS, misalnya untuk membuat kontennya dibenarkan.
Nick Rice
16

Apa yang saya lakukan adalah mengambil tugas-tugas umum seperti memusatkan atau mengambang dan membuat kelas CSS dari mereka. Ketika saya melakukan itu, saya bisa menggunakannya di seluruh halaman. Saya juga dapat memanggil sebanyak yang saya inginkan pada elemen yang sama.

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

Sekarang saya dapat menggunakannya dalam kode HTML saya untuk melakukan tugas-tugas sederhana.

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

Saya masih menggunakan tag <center> kadang-kadang karena tidak ada dalam CSS yang berfungsi dengan baik. Contoh mencoba menggunakan trik <div> dan gagal:

<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> mendapat hasil. Untuk menggunakan CSS sebagai gantinya, Anda terkadang harus meletakkan CSS di beberapa tempat dan mengacaukannya untuk membuatnya tepat di tengah. Untuk menjawab pertanyaan Anda, CSS telah menjadi agama dengan orang-orang percaya dan pengikut yang menghindari <pusat> <b> <i> <u> sebagai penghujatan, tidak suci, dan terlalu sederhana demi keamanan pekerjaan mereka sendiri. Dan jika mereka mencoba untuk mengambil <tabel> Anda, tanyakan kepada mereka apa yang setara dengan CSS dari atribut colspan atau rowspan.

Bukan kebenaran abstrak atau kutu buku, tetapi kebenaran yang hidup yang diperhitungkan.
- Zen

Russell Hankins
sumber
Anda juga bisa menggunakandisplay:flex; justify-content:center; text-align:center
Justin Liu
11

Anda masih dapat menggunakan ini dengan XHTML 1.0 Transitional dan HTML 4.01 Transitional jika Anda suka. Satu-satunya cara lain (cara terbaik, menurut saya) adalah dengan margin:

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

HTML Anda harus mendefinisikan elemen, bukan mengatur presentasinya.

Sampson
sumber
8

Ini dimaksudkan agar markup, yaitu tag HTML, mewakili makna dan struktur, bukan penampilan. Itu dicampuradukkan dalam versi awal HTML tetapi standar orang mencoba untuk membersihkannya sekarang.

Satu masalah dengan membiarkan tag mengontrol tampilan adalah bahwa halaman Anda tidak cocok dengan perangkat untuk orang cacat, seperti pembaca layar. Ini juga menyebabkan memiliki banyak dan banyak tag dalam teks Anda yang tidak membantu memperjelas artinya, tetapi mengacaukannya dengan informasi dari tingkat yang berbeda.

Jadi CSS dipikirkan untuk memindahkan pemformatan / tampilan ke bahasa yang berbeda, yang terpisah dari teks dan dapat dengan mudah disimpan seperti itu. Antara lain, ini memungkinkan beralih stylesheet untuk mengubah tampilan halaman web tanpa menyentuh markup lainnya. Dan untuk dapat melakukan itu untuk banyak halaman dalam satu gelombang besar.

Alat CSS memberi Anda untuk melakukan ini tidak selalu elegan, saya di pihak Anda di sana. Misalnya, tidak ada cara untuk melakukan pemusatan vertikal yang efektif. Dan pemusatan horizontal, jika bukan hanya teks yang bisa diterima text-align, tidak jauh lebih baik.

Anda memiliki pilihan untuk melakukan hal yang mudah, efektif dan kacau atau bersih, elegan dan rumit. Saya tidak mengerti mengapa pengembang Web tahan dengan kekacauan ini, tapi saya kira mereka senang setidaknya memiliki kesempatan untuk menyelesaikan pekerjaan mereka.

Carl Smotricz
sumber
4
+1: Sebagai seseorang yang bahkan bukan pengembang web, saya mengenali betapa rumitnya menentukan atribut presentasi tertentu menggunakan CSS. Saya masih merasa lebih baik menggunakan CSS daripada mengacaukan markup struktural, tapi ... WTF? Siapa yang bertanggung jawab mendefinisikan spec CSS, monyet acak yang mereka temukan di hutan terpencil? Serius.
Dan Moulding
2
Tolong, jangan menghina monyet acak di hutan terpencil!
DaveWalley
7

HTML dimaksudkan untuk menyusun data, bukan mengendalikan tata letak. CSS dimaksudkan untuk mengontrol tata letak. Anda juga akan menemukan bahwa banyak desainer tidak suka menggunakan <table>tata letak karena alasan yang sama.

jkndrkn
sumber
5

Untuk teks dan gambar, Anda dapat menggunakan text-align:

<div style="text-align: center;">
    I'm centered.
</div>
Tomas Markauskas
sumber
1
Ini disebut elemen sebaris.
Christoph Bühler
3

CSS memiliki text-align: centerproperti, dan karena ini murni hal visual, bukan semantik, ia harus diturunkan ke CSS, bukan HTML.

keithjgrant
sumber
1
+1 untuk menjelaskan mengapa itu tidak digunakan lagi selain sebagai alternatif.
moribvndvs
8
tetapi text-alignakan menyelaraskan isi wadah, bukan wadah itu sendiri
Andreas Grech
Ah, ya, jika itu elemen blok-level, "auto" padding akan melakukannya. Jika elemen inline, gunakan text-align: centerpada elemen induknya.
keithjgrant
(
Ups
@AndreasGrech - <center>melakukan keduanya . Sangat luas.
Quentin
3

Makanan untuk dipikirkan: apa yang akan dilakukan synthesizer text-to-speech <center>?

Jörg W Mittag
sumber
1
Mungkin berbicara "pusat" atau "terpusat".
DaveWalley
Sama seperti halnya dengan css 'text-align: center; Saya seharusnya.
MSpreij
0

Anda dapat menambahkan ini ke css Anda dan gunakan <div class="center"></div>

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

atau jika Anda ingin menyimpan <center></center>dan bersiap-siap jika itu pernah dihapus, tambahkan ini ke css Anda

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

Jawaban Populer Paling Tidak

  1. Tag yang sudah usang tidak harus berupa tag yang buruk ;
  2. Ada yang tag yang berhubungan dengan logika presentasi, centeradalah salah satu dari mereka;
  3. Sebuah centertag tidak sama sebagai div dengan text-align:center;
  4. Fakta bahwa Anda memiliki cara lain untuk melakukan sesuatu tidak membuatnya tidak valid.

Izinkan saya menjelaskan karena ada downvoter terkenal di sini yang akan berpikir saya membela oldschool HTML4 atau sesuatu. Tidak, bukan aku. Tapi perdebatan sekitar centerhanyalah perang tren, tidak ada alasan nyata untuk membuang tag yang melayani tujuan yang valid dengan baik.

Jadi mari kita lihat argumen utama yang menentangnya.

  • "Itu menggambarkan presentasi, bukan semantik!"
    Tidak. Ini menggambarkan pengaturan logis - dan ya memiliki tampilan default, seperti halnya tag lain suka<p>atausuka<ul>. Tetapi intinya adalah hubungan bagian terlampir dengan lingkungannya. Center mengatakan "ini adalah sesuatu yang kami pisahkan dengan pemosisian yang berbeda secara visual".

  • "Itu tidak sah"
    Ya itu. Itu hanya ditinggalkan, seperti dalam, bisa dihapus nanti . Selama 15+ tahun sekarang. Dan itu tidak ke mana-mana, rupanya. Ada situs utama yang menggunakan tag ini karena sangat mudah dibaca dan to the point.

  • "Itu tidak didukung di HTML5"
    Sebenarnya ini salah satutag yangpaling banyak didukung .

  • "Ini oldschool"
    Tali sepatu juga oldschool. Metode baru tidak membatalkan yang lama. Anda ingin merasa progresif dan modern: baik. Tapi jangan membuatnya menjadi hukum.

  • "Ini bodoh / canggung / lumpuh / menceritakan sebuah cerita tentang Anda"
    Tak satu pun dari ini. Ini seperti palu: satu alat untuk pekerjaan tertentu. Ada alat lain untuk pekerjaan yang sama dan pekerjaan lain untuk alat yang sama; tetapi itu diciptakan untuk memecahkan masalah tertentu dan masalah itu masih ada sehingga kami mungkin hanya menggunakan solusi khusus.

  • "Anda seharusnya tidak melakukan ini, karena, CSS"
    Pemusatan dapat benar-benar dicapai oleh CSS tetapi itu hanya satu cara, bukan satu-satunya, apalagi satu-satunya yang sesuai . Apa pun yang didukung, berfungsi, dan dapat dibaca harus boleh digunakan.

TL; DR:

Satu-satunya alasan untuk tidak menggunakannya <center>adalah karena orang akan membenci Anda.

dkellner
sumber