Pertama mari kita lihat kode file XHTML/HTML saya yang sederhana (bagian). Tujuan kita adalah memusatkan #container secara horizontal.
<tubuh>
<div id="wadah">
<h1>konten</h1>
<p>Lorem ipsum dolor sit amet, pembentuk elit
</div>
</body>Gunakan margin adaptif (margin otomatis)
Cara yang lebih disukai untuk memusatkan elemen apa pun secara horizontal adalah dengan menggunakan properti margin dan menyetel nilai kiri dan kanan ke otomatis. Namun Anda harus menentukan lebar untuk #container.
div#wadah {
margin-kiri: otomatis;
margin-kanan: otomatis;
lebar:168 piksel;
}
Solusi ini berfungsi pada browser modern apa pun, bahkan IE6, selama browser tersebut berada dalam mode kepatuhan standar web. Sayangnya ini tidak akan berfungsi di versi IE/Win sebelumnya. Kami membuat tabel untuk ini: Menjelajahi daftar dukungan perbatasan adaptif Dukungan versi browser
Internet Explorer 6.0, mode kepatuhan Ya
Internet Explorer 6.0, mode unik No
Internet Explorer 5.5 Windows No
Internet Explorer 5.0 Windows No
Internet Explorer 5.2 Macintosh Ya
Semua versi Mozilla saat ini adalah
Semua versi Mozilla Firefox adalah
Netscape 4.x Tidak
Netscape 6.x+ Ya
Opera 6.0, 7.0 Macintosh dan Windows Ya
Safari 1.2 Ya
Meskipun dibatasi oleh dukungan browser, sebagian besar desainer mendorong Anda untuk melakukan hal ini bila memungkinkan. Tapi kita masih bisa menggunakan CSS untuk semua situasi. Menggunakan perataan teks (text-align) Solusi ini memerlukan penggunaan properti text-align, yang diterapkan pada elemen body dan diberi nilai center.
tubuh{
perataan teks:tengah;
}
Ini adil untuk semua browser, menyeluruh, dan ada di ujung jari Anda. Namun, ini adalah properti yang diberikan pada teks, yang menyebabkan teks di #container juga berada di tengah. Oleh karena itu, kita harus melakukan beberapa pekerjaan tambahan pada tata letak:
div#wadah{
perataan teks: kiri;
}
Dengan cara ini, perataan teks dapat dikembalikan ke keadaan default. Perbatasan terintegrasi dan perataan teks. Karena perataan teks kompatibel ke belakang dan browser kontemporer juga mendukung batas adaptif, banyak desainer menggabungkannya untuk mencapai penggunaan lintas browser.
tubuh{
perataan teks: tengah;
}
#wadah {
margin-kiri: otomatis;
margin-kanan: otomatis;
batas: 1px merah solid;
lebar: 168 piksel;
perataan teks: kiri
}
Sayangnya masih belum sempurna karena masih retas. Anda harus menulis aturan yang berlebihan untuk pengaturan teks. Namun sekarang, kita bisa menggunakan solusi lintas browser yang lebih sempurna.
Solusi batas negatif