Bagaimanakah Saya Boleh Menjajarkan Div Secara Menegak dengan Dimensi Tidak Diketahui dalam CSS?

Penjajaran Div Menegak dengan Dimensi Tidak Diketahui

Dalam CSS, melaraskan penjajaran menegak div secara dinamik boleh mencabar apabila saiz div tidak diketahui . Berikut ialah penyelesaian yang menangani isu ini:

Penyelesaian CSS

Penyelesaian CSS tulen ini menggunakan penjajaran menegak: tengah dalam div yang lebih besar dengan ketinggian garis tetap:

<code class="css">#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}</code>

Penjelasan

Div #center diletakkan di tengah induknya dengan pelarasan atas: 50% dan margin atas untuk mengambil kira separuh ketinggiannya. Ketinggian baris yang besar memastikan kandungan teks di dalamnya (dalam kes ini, div kanak-kanak #wrap) kekal di bahagian bawah.

Di dalam #center, #wrap mengandungi imej dengan jajar menegak: tengah, yang memastikan penjajaran menegak tanpa mengira saiz imej.

Kaveat

Satu-satunya penyemak imbas yang mempunyai kaveat ialah IE7. Untuk itu, inner div #wrap dan imej mesti datang pada baris yang sama:

<code class="html"><span id="center">
  <span id="wrap"><img src="..." alt="" /></span>
</span></code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Div Secara Menegak dengan Dimensi Tidak Diketahui dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!