Tutorial Div+CSS: Ringkasan metode untuk mencapai pemusatan horizontal wadah div

Tata letak halaman dalam standar web diimplementasikan menggunakan Div dan CSS. Yang paling umum digunakan adalah efek memusatkan seluruh halaman secara horizontal. Ini adalah pengetahuan dasar dalam tata letak halaman dan pengetahuan yang harus dikuasai terlebih dahulu. Namun, orang masih sering menanyakan pertanyaan ini. Di sini saya akan merangkum secara singkat metode penggunaan Div dan CSS untuk mencapai pemusatan halaman secara horizontal:

1. margin:auto 0 dan text-aligh:center

digunakan di browser modern (seperti Internet Explorer 7, Firefox, Opera, dll.) Metode untuk mencapai pemusatan horizontal di browser modern sangat sederhana, cukup atur margin kiri dan kanan ke otomatis. Arti:
#bungkus { margin:0 otomatis;}
Kode di atas berarti jarak antara div bungkus dengan sisi kiri dan kanan diatur secara otomatis, dengan nilai atas dan bawah menjadi 0 (bisa apa saja). Silakan jalankan kode saat ini di browser modern (seperti Internet Explorer 7, Firefox, Opera, dll.):
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">




div#bungkus {
lebar:760 piksel;
margin:0 otomatis;
batas:1 piksel padat #333;
warna latar:#ccc;
}

Cara di atas bekerja dengan sangat baik. Tapi ini tidak berfungsi di Internet Explorer 6 dan yang lebih baru, tapi untungnya ada solusinya sendiri. Di Internet Explorer, atribut perataan teks dapat diwariskan, artinya, setelah disetel di elemen induk, atribut ini akan memiliki atribut ini di elemen turunan secara default. Oleh karena itu, kita dapat mengatur nilai atribut text-align pada tag body menjadi center, sehingga semua elemen pada halaman akan otomatis berada di tengah. Pada saat yang sama, kita juga perlu menambahkan hook untuk mengubah teks pada halaman cara kita biasa membaca adalah rata kiri. Jadi kita harus menulis kode seperti ini:
isi {text-align:center;}
#wrap {perataan teks:kiri;}
Dengan cara ini, kita dapat dengan mudah mencapai penyelarasan tengah Div di Internet Explorer. Oleh karena itu, untuk menampilkan efek centering di semua browser, kita dapat menulis kode seperti ini:
isi { perataan teks:tengah }
#wrap { perataan teks:kiri;
margin:0 otomatis;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">




isi { perataan teks:tengah }
div#bungkus {
perataan teks:kiri;
lebar:760 piksel;
margin:0 otomatis;
batas:1 piksel padat #333;
warna latar:#ccc;
}

Namun ada premis di sini, yaitu elemen yang berada di tengah harus memiliki lebar yang tetap. Misalnya, di sini kita mengaturnya menjadi 760 piksel.

2. Pemosisian relatif dan margin negatif

Lakukan pemosisian relatif untuk bungkus, lalu gunakan margin negatif untuk mengimbangi offset. Cara ini relatif sederhana dan mudah diterapkan:

#wrap {
posisi:relatif;
lebar:760 piksel;
kiri:50%;
margin-kiri:-380px
}
Arti dari kode ini adalah untuk mengatur posisi wrap relatif terhadap tag body dari elemen induknya, dan kemudian memindahkan batas kirinya ke tengah halaman (yaitu, arti dari left:50%); berpindah dari posisi tengah ke kiri. Offset kembali setengah jarak sehingga berada di tengah secara horizontal.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">




div#bungkus {
posisi:relatif;
lebar:760 piksel;
kiri:50%;
margin-kiri:-380 piksel;
batas:1 piksel padat #333;
warna latar:#ccc;
}

Demikian pula, Anda perlu menyetel lebar tetap sebelum menyetel pemusatan horizontal.

Metode mana yang harus dipilih?
Manakah dari dua cara di atas yang lebih baik? Metode pertama sepertinya menggunakan teknologi Hack, namun nyatanya tidak. Ini adalah metode penulisan standar Web yang cukup memuaskan dan sepenuhnya sesuai dengan spesifikasi. Oleh karena itu, Anda dapat memilih salah satu dari dua metode tersebut untuk digunakan adalah masalah peretasan CSS.

3. Metode pemusatan lainnya Yang

disebutkan di atas adalah semua implementasi pemusatan horizontal ketika lebar tertentu ditetapkan. Terkadang kita ingin membuat tata letak yang fleksibel, atau ketika sebuah elemen berada di dalam wadah, kita hanya ingin elemen tersebut berada di tengah dan tidak ingin mengatur lebar tertentu. Faktanya, ini bukan tata letak tengah yang sebenarnya. Untuk elemen dengan panjang 100%, apakah menurut Anda itu rata tengah atau rata kiri? Jadi semua pemusatan tanpa tinggi dan lebar bukanlah pemusatan yang sebenarnya. Kami mengatur desain ini menggunakan padding elemen. Faktanya, kami mengubah ukuran wadah elemen induk:
Jika kita ingin panjang elemen wrap berubah mengikuti jendela dengan tetap mempertahankan bagian tengahnya, kita dapat menulis seperti ini:
tubuh {
bantalan:10px 150px;
}
Di sini, kita hanya perlu menjaga padding di sisi kiri dan kanan elemen induk tetap sama.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">




tubuh {
bantalan:10px 150px;
}
div#bungkus {
batas:1 piksel padat #333;
warna latar:#ccc;
}

Tentu saja ini hanya "tampaknya terpusat", namun sering kali sangat berguna.