Rumah > hujung hadapan web > tutorial css > Mengapa Padding Menegak Berasaskan Peratusan Gagal, dan Bagaimana Saya Boleh Menggunakan Ketinggian Peratusan untuk Penjajaran Menegak dalam CSS?

Mengapa Padding Menegak Berasaskan Peratusan Gagal, dan Bagaimana Saya Boleh Menggunakan Ketinggian Peratusan untuk Penjajaran Menegak dalam CSS?

Mary-Kate Olsen
Lepaskan: 2024-12-11 20:17:15
asal
460 orang telah melayarinya

Why Does Percentage-Based Vertical Padding Fail, and How Can I Use Percentage Heights for Vertical Alignment in CSS?

Cara Mengawal Padding dan Margin Menggunakan Peratusan Ketinggian Bekas Induk

Dalam CSS, mengawal penjajaran menegak boleh dicapai menggunakan padding-top harta benda. Walau bagaimanapun, menetapkan sifat ini sebagai peratusan lebar bekas induk dan bukannya ketinggian boleh menyebabkan tingkah laku yang tidak diingini.

Percubaan Asal:

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}
Salin selepas log masuk

Tidak dijangka Kelakuan:

Apabila menukar lebar .bekas asas, penjajaran menegak terputus, walaupun bahagian atas pelapik ditetapkan sebagai peratusan. Ini kerana pelapik menegak dan jidar dikira sebagai peratusan lebar bekas induk.

Penyelesaian:

Daripada menggunakan padding-top, gunakan sifat atas untuk mengawal penjajaran menegak. atas dikira sebagai peratusan ketinggian bekas induk.

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  position: absolute;
  top: 50%;
}
Salin selepas log masuk

Struktur div bersarang ini meletakkan div kanak-kanak di dalam bekas induk dan menjajarkannya secara menegak:

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>
Salin selepas log masuk

Dengan menggunakan bahagian atas bukannya padding-top, div anak diletakkan 50% ke bawah dari bahagian atas bekas induknya, tanpa mengira lebarnya. Ini memastikan penjajaran menegak walaupun apabila lebar induk berubah.

Atas ialah kandungan terperinci Mengapa Padding Menegak Berasaskan Peratusan Gagal, dan Bagaimana Saya Boleh Menggunakan Ketinggian Peratusan untuk Penjajaran Menegak dalam CSS?. 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