Bagaimana untuk Menjajarkan Kandungan Secara Menegak dalam Div Bersaiz Tetap Merentasi Pelayar?

Penjajaran Menegak dalam Div Tertakrif

Soalan:

Cara menjajarkan mana-mana kandungan secara menegak dalam div dengan lebar dan ketinggian yang ditentukan, memastikan keseragaman merentas pelayar dan mengelakkan sel jadual penyelesaian?

Jawapan:

Terdapat beberapa kaedah untuk mencapai penjajaran menegak dalam senario ini:

Versi 1: Induk Div ​​dengan Paparan as Table-Cell

Pendekatan ini melibatkan penetapan induk sifat paparan div ke sel jadual dan menjajarkan kandungan secara menegak menggunakan vertical-align:middle.

Versi 2: Induk Div ​​dengan Blok Paparan dan Kandungan Paparan Table-Cell

Di sini, div induk ditetapkan kepada blok paparan, manakala div kandungan diperuntukkan sel jadual paparan dan penjajaran menegak dicapai dengan vertical-align: middle.

Versi 3: Induk Div ​​Terapung dan Content Div sebagai Paparan Table-Cell

Dalam kaedah ini, div induk terapung dan kandungan div ditetapkan untuk memaparkan sel jadual dengan penjajaran menegak digunakan menggunakan penjajaran menegak: tengah.

Versi 4: Kedudukan Div Induk Relatif dengan Kedudukan Kandungan Mutlak

Pendekatan ini memerlukan pengiraan yang tepat untuk pelaksanaan tertentu. Div induk diposisikan secara relatif dan div kandungan diposisikan secara mutlak dengan set atasnya kepada 50%, ketinggian kepada 50% dan margin-atas dikira sebagai separuh daripada ketinggian div kandungan dengan tanda negatif.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Kandungan Secara Menegak dalam Div Bersaiz Tetap Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!