Bagaimana untuk Memusatkan Div Secara Menegak Di Dalam Div Ketinggian Peratusan?

Penjajaran Menegak Div ​​dalam Div Ketinggian Peratusan

Menempatkan div secara menegak dalam div lain yang mempunyai ketinggian berasaskan peratusan boleh menjadi cabaran biasa dalam web pembangunan.

Soalan: Adakah mungkin untuk memusatkan div secara menegak dalam div yang mempunyai ketinggian berasaskan peratusan?

Jawapan: Ya , adalah mungkin untuk mencapai pemusatan menegak menggunakan pelbagai teknik. Pendekatan yang popular ialah menggunakan sifat CSS display: table-cell dan vertical-align: middle.

Dengan menetapkan display: table-cell pada div dalam, ia menjadi elemen jadual dan mewarisi sifat sel jadual. Sifat vertical-align: middle kemudian menjajarkan sel secara menegak dalam jadual.

Contohnya, pertimbangkan kod berikut:

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}

Dalam contoh ini, child-div akan dipusatkan secara menegak dalam parent-div yang mempunyai 50% ketinggian.

Adalah penting untuk ambil perhatian bahawa walaupun pendekatan ini berfungsi dengan baik untuk kebanyakan penyemak imbas, Internet Explorer 6 tidak menyokong harta display: table-cell. Oleh itu, kaedah alternatif atau penyelesaian keserasian merentas penyemak imbas mungkin perlu dipertimbangkan untuk IE6.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Div Secara Menegak Di Dalam Div Ketinggian Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!