CSS menyelesaikan masalah pemusatan menegak ketinggian_CSS/HTML yang tidak diketahui

Melainkan dinyatakan sebaliknya, kandungan di tapak ini dibuat dengan kebenaran perkongsian dan adalah untuk kegunaan bukan komersial Sila hormati hasil kerja anda.

Tajuk asal: Pemusatan Menegak dalam CSS

Sari kata: Penyelesaian Definitif Yuhu dengan Ketinggian Tidak Diketahui

Terjemahan: forestgan

Walaupun terdapat ciri penjajaran menegak CSS, ia tidak dapat menyelesaikan masalah pemusatan menegak ketinggian yang tidak diketahui dengan berkesan (apabila terdapat teks atau imej ketinggian yang tidak diketahui dalam teg DIV).

Untuk penyemak imbas standard seperti Mozilla, Opera, Safari, dsb., anda boleh menetapkan mod paparan elemen induk kepada JADUAL (paparan: jadual;) dan elemen anak dalaman kepada sel jadual (paparan: sel jadual ). Ciri penjajaran menegak menjadikannya berpusat secara menegak, tetapi tidak disokong oleh penyemak imbas bukan standard.

Pelayar bukan standard hanya boleh menetapkan elemen anak menjadi 50% dari atas, dan kemudian meletakkan elemen di dalamnya dengan jarak -50% dari atas untuk mengimbanginya.

CSS
badan {padding: 0; jidar: 0;}
badan,html{tinggi: 100%;}
#luar {tinggi: 100%; lebar: 100%; latar belakang: gading;}
#luar[id] {paparan: jadual; /
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative;lebar: 400px;margin: 0 auto;} /* untuk explorer sahaja */
div.greenBorder {sempadan: 1px hijau pepejal: ivory;}

XHTML

Kelebihan kod CSS di atas ialah tiada penggodaman dan ia menggunakan pemilih CSS2 #value[id] yang tidak disokong oleh IE.

Pemilih CSS2 #nilai[id] bersamaan dengan pemilih #nilai, tetapi Internet Explorer tidak menyokong pemilih jenis ini. Begitu juga, .value[class] adalah bersamaan dengan .value, yang hanya boleh dibaca oleh pelayar standard.

Ujian: Firefox1.5, Opera9.0, IE6.0, IE5.0 lulus.