Bagaimana Saya Memusatkan Elemen Kanak-Kanak Di Dalam Induknya ``?-tutorial css-php.cn

Bagaimana Saya Memusatkan Elemen Kanak-Kanak Di Dalam Induknya ``?

Barbara Streisand

Lepaskan： 2024-11-30 04:39:17

asal

489 orang telah melayarinya

How Do I Center a Child Element Inside Its Parent ``?

Memusatkan Elemen dalam

Elemen

Apabila menggunakan sifat CSS kiri: 50%, elemen dipusatkan berkenaan dengan keseluruhan port pandangan, bukan elemen induk serta-merta. Untuk memusatkan elemen anak dalam induknya, gunakan gabungan penjajaran teks dan jidar.

Tetapkan sifat penjajaran teks elemen induk ke tengah untuk memusatkan kandungannya secara mendatar. Kemudian, gunakan margin: auto; kepada elemen kanak-kanak. Ini akan melaraskan jidar pada semua sisi secara automatik, memastikan elemen dipusatkan dalam induk.

Contoh:

#parent {
    text-align: center;
}

.child {
    margin: auto;
}

Salin selepas log masuk

Dalam contoh ini, #induk div akan dipusatkan secara mendatar dalam port pandang, dan div .child akan dipusatkan secara mendatar dalam #parent div.

Nota Tambahan:

Menggunakan margin: auto; hanya akan memusatkan elemen secara mendatar. Jika anda ingin memusatkannya secara mendatar dan menegak, anda perlu menetapkan margin: auto auto;.
Jika elemen anak mempunyai lebar yang lebih lebar daripada elemen induk, ia akan melangkaui sempadan induk. Dalam kes ini, sebaiknya tetapkan sifat lebar elemen anak kepada nilai yang lebih kecil yang sesuai dengan induk.

Atas ialah kandungan terperinci Bagaimana Saya Memusatkan Elemen Kanak-Kanak Di Dalam Induknya ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!