Bagaimana untuk Memusatkan Elemen Terapung secara menegak pada Ketinggian Tidak Diketahui?

Elemen Terapung Menjajarkan Tengah Menegak Ketinggian Tidak Diketahui

Masalah:

Anda mempunyai elemen kontena yang melintang memusatkan dua unsur terapung dengan ketinggian yang berbeza-beza. Secara lalai, terapung ini sejajar dengan bahagian atas bekas. Bagaimanakah anda boleh memusatkannya secara menegak?

Jawapan:

Penjajaran menegak terus terapung tidak boleh dilakukan, kerana ia mematuhi peraturan penjajaran khusus yang mengutamakan penjajaran ke atas. Walau bagaimanapun, anda boleh mencapai kesan ini dengan mengeksploitasi peraturan bahawa terapung boleh terkandung dalam elemen yang mewujudkan konteks pemformatan blok baharu (BFC).

Penyelesaian:

1. Balut setiap apungan dalam elemen peringkat sebaris dengan paparan: blok sebaris. Ini mewujudkan BFC di sekeliling apungan dan membolehkan penjajaran menegak.
2. Gunakan penjajaran menegak untuk menjajarkan pembalut blok sebaris secara menegak.
3. Pastikan pembalut mempunyai lebar yang mencukupi untuk memuatkan kandungannya, kerana jika tidak, ruang mungkin kelihatan di antara mereka.

Contoh:

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

/* Float wrappers */
#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Terapung secara menegak pada Ketinggian Tidak Diketahui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!