Bagaimana untuk Memusatkan Elemen Dalam Div Induknya Menggunakan CSS?-tutorial css-php.cn

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;
}

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Adakah Atribut `Jenis` Teg Benar-benar Diperlukan? Artikel seterusnya：Mengapa Butang Melekit Saya Tidak Berfungsi dalam IE 11?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2039

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2199

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1853

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...