Memusatkan elemen menggunakan CSS bukanlah perkara sederhana. Pengaturan pemusatan CSS yang sama berperilaku berbeda di browser yang berbeda. Artikel ini memperkenalkan beberapa metode umum dalam CSS untuk memusatkan elemen secara horizontal.
1. Gunakan margin otomatis untuk mencapai pemusatan.
Cara yang lebih disukai untuk memusatkan elemen secara horizontal di CSS adalah dengan menggunakan atribut margin—cukup atur atribut margin-left dan margin-right elemen ke auto. Dalam penggunaan sebenarnya, kita dapat membuat div yang bertindak sebagai wadah untuk elemen-elemen yang perlu dipusatkan. Satu hal yang perlu diperhatikan secara khusus adalah lebarnya harus ditentukan untuk wadahnya:
Metode ini bekerja sangat baik di sebagian besar browser arus utama, dan bahkan IE6 pada platform Windows dapat ditampilkan secara normal dalam mode kepatuhan standarnya. Namun sayangnya, pada versi IE yang lebih rendah, pengaturan ini tidak mencapai efek pemusatan. Oleh karena itu, jika Anda ingin menggunakan metode ini dalam proyek sebenarnya, Anda harus memastikan bahwa versi browser IE pengguna tidak lebih rendah dari 6.0.
Meskipun dukungannya kurang ideal, sebagian besar desainer merekomendasikan penggunaan pendekatan ini bila memungkinkan. Cara ini juga dianggap paling benar dan masuk akal di antara berbagai cara untuk mencapai pemusatan elemen secara horizontal menggunakan CSS.
2. Gunakan text-align untuk mencapai centering.
Cara lain untuk mencapai centering elemen adalah dengan menggunakan atribut text-align. Pendekatan ini merupakan peretasan lengkap, tetapi kompatibel dengan sebagian besar browser, jadi tentu saja diperlukan dalam beberapa kasus.
Alasan mengapa disebut hack adalah karena metode ini tidak menerapkan atribut teks pada teks, tetapi pada elemen yang menjadi wadahnya. Hal ini juga menciptakan pekerjaan ekstra bagi kami. Setelah membuat div yang diperlukan untuk tata letak, kita perlu menerapkan atribut text-align ke badan sesuai dengan kode berikut:
Akankah ada masalah nanti? Semua elemen turunan tubuh akan ditampilkan di tengah.
Oleh karena itu, kita perlu menulis aturan lain untuk mengembalikan teks ke perataan kiri default:
Bisa dibayangkan aturan tambahan ini akan menimbulkan ketidaknyamanan. Selain itu, browser yang benar-benar memenuhi standar tidak akan mengubah posisi container, tetapi hanya akan memusatkan teks di dalamnya.
3. Gunakan kombinasi margin otomatis dan perataan teks.
Karena metode perataan dan pemusatan teks memiliki kompatibilitas yang baik, dan metode margin otomatis juga didukung oleh sebagian besar browser kontemporer, banyak desainer menggunakan kombinasi keduanya untuk membuat efek Pemusatan. menerima dukungan lintas-browser maksimum:
Namun ini masih merupakan peretasan, dan sama sekali belum sempurna. Kita masih perlu menulis aturan tambahan untuk memusatkan teks dalam wadah, tapi setidaknya ini terlihat bagus di seluruh browser.
4. Solusi margin negatif
Solusi margin negatif lebih dari sekedar menambahkan margin negatif ke elemen. Metode ini memerlukan penggunaan posisi absolut dan margin negatif.
Berikut ini adalah metode implementasi spesifik dari solusi ini. Pertama, buat wadah yang berisi elemen tengah, lalu posisikan secara mutlak 50% dari tepi kiri halaman. Dengan cara ini, margin kiri penampung akan dimulai dari 50% lebar halaman.
Lalu, tetapkan nilai margin kiri penampung menjadi setengah negatif dari lebar penampung. Ini akan menambatkan wadah pada titik tengah horizontal halaman.
Meskipun ini bukan solusi yang disukai, ini merupakan pendekatan yang baik dan memiliki cakupan penerapan yang luas.