Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Elemen Dalam Div Induknya Menggunakan CSS?

Bagaimana untuk Memusatkan Elemen Dalam Div Induknya Menggunakan CSS?

Susan Sarandonasal: 2024-11-25 03:06:12981semak imbas

How to Center an Element Within Its Parent Div Using CSS?

Memusatkan Elemen Dalam Induk

Apabila memusatkan elemen HTML menggunakan kiri: 50%;, ia menjajarkan elemen dengan keseluruhan tetingkap penyemak imbas. Walau bagaimanapun, untuk memusatkan elemen secara khusus dalam induknya

elemen, pendekatan berbeza diperlukan.

Untuk mencapai ini, tetapkan text-align:center; kepada ibu bapa

. Ini akan memusatkan semua kandungan dalam

, termasuk elemen anak.

Seterusnya, tambah margin:auto; kepada elemen kanak-kanak. Ini memastikan bahawa elemen anak dilaraskan secara automatik dalam induk

, tanpa mengira lebar atau tingginya.

Berikut ialah demonstrasi menggunakan CSS:

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

Perhatikan margin:auto ; memusatkan elemen anak secara mendatar dan menegak dalam induk

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Dalam Div Induknya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html auto using this margin

Kenyataan：

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 sebelumnya：Adakah Atribut `Jenis` Teg Benar-benar Diperlukan?Artikel seterusnya：Adakah Atribut `Jenis` Teg Benar-benar Diperlukan?

Artikel berkaitan

Lihat lagi