Bagaimanakah Saya Boleh Memusatkan Elemen Div Secara Menegak Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memusatkan Elemen Div Secara Menegak Menggunakan CSS?

DDD

Lepaskan： 2024-12-18 05:51:09

asal

419 orang telah melayarinya

How Can I Vertically Center a Div Element Using CSS?

Penjajaran Menegak

Elemen dengan CSS

Dalam perbincangan ini, kami menangani persoalan biasa tentang cara memusatkan

elemen dalam bekas induknya menggunakan CSS.

Untuk menyelesaikan isu ini, anda boleh menggunakan pelbagai pendekatan. Kaedah moden yang berkesan ialah memanfaatkan flexbox, modul susun atur CSS yang menawarkan kawalan tepat ke atas susunan elemen. Dengan menggunakan peraturan CSS berikut pada elemen induk:

#Login {
    display: flex;
    align-items: center;
}

Salin selepas log masuk

Anda mengarahkan penyemak imbas untuk menyusun

elemen secara mendatar (dikawal dengan paparan: flex;) dan selaraskannya secara menegak di tengah (align-item: center;). Pendekatan ini berfungsi dengan berkesan dalam kebanyakan penyemak imbas moden.

Untuk penyemak imbas lama yang tidak mempunyai sokongan flexbox, seperti Internet Explorer 9 dan lebih awal, penyelesaian alternatif mungkin diperlukan. Terokai bacaan disyorkan yang disediakan untuk mendapatkan cerapan lanjut tentang sokongan penyemak imbas dan teknik CSS lanjutan untuk penjajaran elemen menegak.

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

sumber：php.cn

Artikel sebelumnya：Mengapa Margin/Padding Terakhir Runtuh dalam Reka Letak Flexbox/Grid? Artikel seterusnya：Bagaimana untuk Memusatkan Elemen `position:fixed` dengan Dimensi Dinamik?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang