CSS menyelesaikan ketinggian yang tidak diketahui vertical centering_CSS/HTML

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: table-cell ), menggunakan ciri penjajaran menegak untuk memusatkannya secara menegak, tetapi pelayar bukan standard tidak menyokongnya.

Pelayar bukan standard hanya boleh menetapkan elemen kanak-kanak menjadi 50% dari atas, dan kemudian menambah elemen di dalam untuk mengimbanginya sebanyak -50% dari atas.

Salin kod Kod adalah seperti berikut:

badan {padding: 0; ;}
badan,html{tinggi: 100%;}
#luar {tinggi: 100%: tersembunyi; lebar: 100%; id] { paparan: jadual; kedudukan: statik;}
#tengah {kedudukan: mutlak; vertical-align : middle; position: static;}
#inner {position: relative; width: 400px; 0 auto;} /* untuk explorer sahaja */
div.greenBorder {sempadan: 1px hijau pepejal; warna latar belakang: gading;}

xhtml

Salin kod Kodnya adalah seperti berikut:

id="inner" class "greenBorder"> CSS2 selector #value[id] tidak disokong oleh IE.

#value[id] pemilih CSS2 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.

Pemusatan menegak dalam CSS yang sah

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title>Panjang lalai<style type="text/css"> body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} body,html{height: 100%; } a{color: #333;} a:hover{color: green;} #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ div.greenBorder {border: 1px solid green; background-color: #FFF;} p{margin: 1em;} </style> Halaman yang lebih panjang<div id="outer"> <div id="middle"> 1. Buka Illustrator, buat fail baharu, lukis segi empat tepat, lebih besar daripada gambar yang anda ingin import dan isi dengan warna putih. 2. Pilih segi empat tepat, menu: Kesan > Herot & Transformasi > Zig Zag, tetapkan seperti yang ditunjukkan di bawah. 3. Menu: Effect > Stylize > Drop Shadow, tetapkan seperti yang ditunjukkan di bawah. 1. Buka Illustrator, buat fail baharu, lukis segi empat tepat, lebih besar daripada gambar yang anda ingin import, dan isi dengan warna putih. 2. Pilih segi empat tepat, menu: Kesan > Herot & Transformasi > Zig Zag, tetapkan seperti yang ditunjukkan di bawah. 3. Menu: Effect > Stylize > Drop Shadow, tetapkan seperti yang ditunjukkan di bawah. <div id="inner" class="greenBorder"> <p> Direka oleh <a href="javascript:toggleContent('inner',1)">Forestgan</a> Demo ini dilesenkan di bawah <a href="javascript:toggleContent('inner',2)">Lesen Creative Commons</a>--Atribusi dan penggunaan bukan komersial. </p> <p> </p> <address style="text-align:center; padding: .5em; clear: left;"> <br><input onclick="runEx('runcode63300')" type="button" value="运行代码"> <input onclick="doCopy('runcode63300')" type="button" value="复制代码"> <input onclick="doSave(runcode63300)" type="button" value="保存代码">[Ctrl+A untuk memilih semua Nota: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </a>]</address> </div> <br> </div> </div>

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7507

15

Tutorial CakePHP

1378

52

Apakah format nama akaun stim

78

11

kunci pengaktifan win11 kekal

52

19

Sambungan NYT menunjukkan dan jawapan

19

57

Tunjukkan Lagi