[CSS/DIV] Memecahkan pemusatan horizontal halaman CSS dengan sempurna

Metode CSS umum untuk memusatkan elemen secara horizontal

Memusatkan elemen dengan CSS bukanlah masalah sepele - pengaturan pemusatan CSS yang sah yang sama berperilaku berbeda di browser yang berbeda. Mari kita mulai dengan melihat beberapa cara umum untuk memusatkan elemen secara horizontal di CSS.

1. Pemusatan dengan margin otomatis

Cara yang lebih disukai untuk memusatkan elemen secara horizontal di CSS adalah dengan menggunakan properti margin—cukup atur properti margin-left dan margin-right ke otomatis. Dalam penggunaan praktis, kita dapat membuat div kontainer untuk elemen-elemen ini yang perlu dipusatkan. Satu hal yang perlu diperhatikan adalah bahwa lebar wadah harus ditentukan:

div#container{ margin-left:auto; margin-kanan:otomatis; lebar: 168px; }

Pendekatan ini bekerja dengan sangat baik di sebagian besar browser utama, bahkan IE6 di Windows dapat ditampilkan dengan benar dalam mode kepatuhan standarnya. Sayangnya, dalam versi IE yang lebih rendah, pengaturan ini tidak mencapai efek pemusatan . Jadi jika Anda ingin menggunakan metode ini dalam proyek nyata, pastikan versi browser IE pengguna tidak lebih rendah dari 6.0.

Meskipun kurangnya dukungan, sebagian besar desainer merekomendasikan untuk menggunakan pendekatan ini sebanyak mungkin. Metode ini juga dianggap paling benar dan masuk akal dari semua metode penerapan pemusatan tingkat elemen dengan CSS.

2. Gunakan penyelarasan teks untuk mencapai pemusatan

Cara lain untuk mencapai pemusatan elemen adalah dengan menggunakan properti text-align, atur nilai properti ke tengah dan terapkan ke elemen isi. Ini adalah peretasan secara menyeluruh, tetapi kompatibel dengan sebagian besar browser, jadi secara alami penting dalam beberapa kasus.

Ini disebut peretasan karena metode ini tidak menerapkan properti teks ke teks, tetapi ke elemen yang merupakan wadah. Ini juga memberi kami pekerjaan ekstra. Setelah membuat div yang diperlukan untuk tata letak, kita perlu menerapkan properti text-align ke isi sesuai dengan kode berikut:

body{ text-align:center; }

Apakah akan ada masalah setelah itu? Semua keturunan tubuh berada di tengah.

Oleh karena itu, kita perlu menulis aturan lain untuk mengembalikan teks ke perataan kiri default:

p{ text-align:left; }

Bisa dibayangkan bahwa aturan tambahan ini akan menyebabkan beberapa ketidaknyamanan. Selain itu, browser yang benar-benar mengikuti standar tidak mengubah posisi wadah, tetapi hanya memusatkan teks di dalamnya.

3. Gunakan kombinasi margin otomatis dan perataan teks

Karena metode pemusatan perataan teks memiliki kompatibilitas mundur yang baik, dan metode padding otomatis juga didukung oleh sebagian besar browser kontemporer, banyak desainer menggunakan kombinasi keduanya untuk memaksimalkan dukungan lintas browser untuk efek pemusatan :

body{ text-align:center; } #container{ margin-left:auto; margin-kanan:otomatis; batas:1pxsolidred; lebar: 168px; Teks-Align:kiri }

Tapi ini selalu peretasan, dan sama sekali tidak sempurna. Kita masih perlu menulis aturan tambahan untuk teks di wadah terpusat, tetapi setidaknya terlihat bagus di berbagai browser.

4. Solusi margin luar negatif

Solusi margin negatif jauh dari sesederhana menambahkan margin negatif ke elemen. Metode ini membutuhkan penggunaan teknik pemosisian absolut dan margin negatif.

Berikut ini adalah metode implementasi spesifik dari skema ini. Pertama, buat wadah dengan elemen terpusat dan posisikan benar-benar 50% dari tepi kiri halaman. Dengan cara ini, margin kiri kontainer akan dimulai pada 50% dari lebar halaman.

Kemudian, atur nilai margin kiri kontainer ke setengah lebar kontainer negatif. Ini akan memperbaiki wadah di titik tengah arah horizontal halaman.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; posisi:absolut; kiri: 50%; lebar: 760px; margin-kiri:-380px; }

Lihat, tidak ada peretasan! Meskipun ini bukan solusi yang disukai, ini adalah cara yang baik untuk melakukannya, dan sangat serbaguna – yang mengejutkan bahwa itu bahkan tidak berfungsi di NetscapeNavigator 4.x tanpa masalah, bukan? Jadi jika Anda menginginkan dukungan browser terluas, maka metode ini akan menjadi pilihan terbaik.