Memusatkan elemen dengan CSS bukanlah hal yang mudah—pengaturan pemusatan CSS yang valid akan berperilaku berbeda di browser yang berbeda. Pertama mari kita lihat 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:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
Metode ini bekerja sangat baik di sebagian besar browser utama, bahkan IE6 pada platform Windows, dalam mode kompatibilitas standarnya (mode Kepatuhan) juga bisa. ditampilkan secara normal. 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 layout, kita perlu menerapkan atribut text-align ke body sesuai dengan kode berikut:
body{
text-align:center
}
Apakah akan ada masalah setelah itu? Semua elemen turunan tubuh akan ditampilkan di tengah.
Oleh karena itu, kita perlu menulis aturan lain untuk mengembalikan teks ke perataan kiri default:
p {
perataan teks:kiri;
}
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. dapatkan dukungan lintas-browser maksimal:
body {
perataan teks: tengah;
}
#wadah {
margin-kiri: otomatis;
margin-kanan: otomatis;
batas: 1px merah solid;
lebar: 168 piksel;
perataan teks: kiri
}
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.
#wadah {
latar belakang: #ffc url(mid.jpg) ulangi-y tengah;
posisi: mutlak;
kiri: 50%;
lebar: 760 piksel;
margin-kiri: -380 piksel;
}
Lihat, tidak ada peretasan! Meskipun ini bukan solusi yang disukai, ini adalah pendekatan yang baik dan bekerja dengan sangat baik - bahkan bekerja di Netscape Navigator 4.x tanpa masalah, dan ini mengejutkan, bukan? Jadi jika Anda menginginkan dukungan browser terluas, cara ini akan menjadi pilihan terbaik.