Bagaimanakah Saya Boleh Menjajarkan Elemen Secara Menegak Dalam Div Bekas?

Penjajaran Elemen Menegak dalam Div Bekas

Anda berhasrat untuk menjajarkan dua elemen secara menegak dalam div bekas. Tutorial di phrogz.net tidak membuahkan hasil yang diingini. Artikel ini meneroka dua kaedah berkesan untuk mencapai penjajaran menegak.

Kaedah Menggunakan CSS Flexbox:

CSS Flexbox menyediakan cara yang cekap untuk memusatkan elemen secara menegak:

bekas {

display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

}

Dengan arah flex ditetapkan kepada 'lajur,' item disusun secara menegak, manakala 'justify-content: center' dan 'align -item: tengah' memastikan pemusatan menegak dan mendatar, masing-masing.

Kaedah Menggunakan CSS Jadual dan Kedudukan:

Kaedah ini melibatkan memanfaatkan sifat jadual dan kedudukan mutlak:

badan {

display: table;
position: absolute;
height: 100%;
width: 100%;

}

bekas {

display: table-cell;
vertical-align: middle;

}

Di sini, elemen badan ditetapkan sebagai jadual, dan elemen bekas ialah sel jadual. Menetapkan 'menjajarkan-menegak' kepada 'tengah' menjajarkan bekas secara menegak di dalam badan.

Kaedah Mana Yang Perlu Dipilih:

Untuk kesederhanaan dan kecekapan, Flexbox disyorkan, terutamanya kerana pilihan susun aturnya yang luas dan sifat responsifnya. Flexbox juga disokong secara meluas oleh penyemak imbas, kecuali versi lama IE.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Elemen Secara Menegak Dalam Div Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!