Koleksi lengkap penyelesaian pemusatan mendatar untuk elemen_CSS/HTML

Pertama, mari kita lihat kod fail XHTML/HTML (bahagian) yang ringkas.

kandungan

Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.

Gunakan sempadan adaptif ( auto?margin)
Cara pilihan untuk memusatkan mana-mana elemen secara mendatar ialah menggunakan sifat margin dan menetapkan nilai kiri dan kanan kepada auto. Tetapi anda mesti menentukan lebar untuk #bekas.

div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
Skim ini berfungsi dalam mana-mana penyemak imbas moden Semua adalah sah, walaupun IE6, dengan syarat ia berada dalam mod keserasian standard web (mod pematuhan?). Malangnya ia tidak akan berfungsi dalam versi sebelumnya IE/Win. Kami membuat jadual untuk ini:

Menyemak imbas senarai sokongan sempadan adaptif?Pelayar?Versi?Sokongan?
Internet Explorer 6.0, mod pematuhan?Ya?
Internet Explorer 6.0, quirks?mod?No?
Internet Explorer 5.5 Windows?Tidak?
Internet Explorer 5.0 Windows?Tidak?
Internet Explorer 5.2 Macintosh?Ya?
Mozilla Semua versi semasa?Ya?
Mozilla Firefox?Semua versi?Ya?
Netscape? 4.x?Tidak?
Netscape?6.x+?Ya?
Opera?6.0,?7.0?Macintosh?dan?Windows?Ya?
Safari?1.2?Ya?

Walaupun terhad sokongan penyemak imbas, kebanyakan pereka bentuk menggalakkan anda melakukan ini apabila boleh. Tetapi kami masih boleh menggunakan CSS untuk semua situasi.

Gunakan penjajaran teks (text-align)
Penyelesaian ini memerlukan penggunaan sifat penjajaran teks, yang digunakan pada elemen badan dan memberikan nilai pusat.

body{
text-align:center;
}
Ia melayan semua penyemak imbas dengan adil, sangat teliti dan di hujung jari anda. Walau bagaimanapun, ini adalah sifat yang diberikan kepada teks, yang menyebabkan teks dalam #bekas turut berpusat. Jadi, kita perlu melakukan kerja tambahan pada reka letak:

div#container{
text-align:?left;
}
Dengan cara ini, penjajaran teks boleh dikembalikan kepada keadaan lalai.

Sempadan bersepadu dan susunan teks
Oleh kerana susunan teks adalah serasi ke belakang, penyemak imbas kontemporari turut menyokong sempadan penyesuaian dan banyak pereka menggabungkannya untuk mencapai penggunaan merentas penyemak imbas.

body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
Malangnya, ia masih belum sempurna, kerana ia masih digodam. Anda perlu menulis peraturan berlebihan untuk susunan teks. Tetapi sekarang, kita boleh menggunakan penyelesaian silang penyemak imbas yang lebih sempurna.

Penyelesaian sempadan negatif
Penyelesaian ini mesti digabungkan dengan kedudukan mutlak (mutlak? kedudukan?). Mula-mula, letakkan #bekas sepenuhnya dan imbangi ke kiri sebanyak 50%, supaya tepi kiri #bekas ialah separuh daripada peleraian halaman. Seterusnya, tetapkan jidar kiri #bekas kepada nilai negatif sama dengan separuh lebar #bekas.

#bekas?{
latar belakang:?#ffc?url(mid.jpg)?repeat-y?center;
kedudukan:?mutlak;
kiri:?50%;
lebar :?760px;
margin-left:?-380px;
}
Lihat, tiada?godam! Malah Netscape?4.x menyokongnya!