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 Sarandon
Lepaskan: 2024-11-25 03:06:12
asal
998 orang telah melayarinya

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#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
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan