Bagaimana untuk Mencapai Penjajaran Menegak Boleh Dipercayai dalam CSS Menggunakan Ketinggian Peratusan?

Penjajaran Menegak dalam CSS Menggunakan Peratusan Ketinggian Bekas Induk

Dalam usaha untuk mencapai penjajaran menegak dalam CSS, anda telah menggunakan pendekatan berikut :

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

.vert-align {
  padding-top: 50%;
  height: 50%;
}

Walaupun pada mulanya menjanjikan, pendekatan ini terbukti bermasalah apabila menyesuaikan lebar div .base, menyebabkan penjajaran menegak terputus. Tingkah laku ini berpunca daripada fakta bahawa padding-top dikira sebagai peratusan lebar dan bukannya ketinggian seperti yang dijangkakan.

Penyelesaian: Menggunakan Sifat Menegak

Untuk menyelesaikan isu ini, anda boleh memanfaatkan sifat CSS menegak dan bukannya padding-top. Sifat ini ditakrifkan secara relatif kepada ketinggian elemen induk:

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

.vert-align {
  top: 50%;
  position: absolute;
}

Dengan menetapkan bahagian atas kepada 50%, anda boleh memusatkan div .vert-align dalam secara menegak dalam bekas .base. Pendekatan ini memastikan bahawa penjajaran menegak kekal utuh tanpa mengira lebar .base. Ingat untuk menetapkan kedudukan div dalam kepada mutlak agar ini berfungsi dengan betul.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penjajaran Menegak Boleh Dipercayai dalam CSS Menggunakan Ketinggian Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!