Bagaimanakah Saya Memusatkan Dua Elemen Secara Menegak Di Dalam Div?

Cara Menegak Memusatkan Dua Elemen dalam Div

Untuk menjajarkan dua elemen secara menegak dalam div, anda boleh menggunakan salah satu daripada kaedah berikut :

1. Kaedah CSS Flexbox

Kaedah ini melibatkan penggunaan sifat flexbox untuk menetapkan arah flex, penjajaran dan justifikasi elemen.

Kod CSS:

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Kod ini akan mencipta bekas fleksibel yang menyusun elemen secara menegak dan memusatkannya secara mendatar dan secara menegak.

2. Kaedah Jadual dan Kedudukan CSS

Kaedah ini menggunakan paparan: table dan vertical-align: sifat tengah untuk menjajarkan elemen secara menegak dalam div.

Kod CSS:

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

Kod ini akan menjadikan elemen badan berkelakuan seperti jadual, dan div #container akan diletakkan sebagai sel jadual dan dijajarkan secara menegak di tengah.

Syor

Flexbox secara amnya disyorkan atas jadual dan kaedah penentududukan kerana pendekatan moden, fleksibiliti dan kemudahan penggunaannya.

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