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

Mary-Kate Olsen
Lepaskan: 2024-11-01 04:18:02
asal
234 orang telah melayarinya

How to Vertically Center Floating Elements of Unknown Heights?

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>
Salin selepas log masuk
<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>
Salin selepas log masuk

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!

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan