Bagaimanakah Saya Memusatkan Elemen Di Dalam Ibu Bapa Menggunakan CSS?-tutorial css-php.cn

How Do I Center an Element Inside a Parent Using CSS?

Memusatkan Elemen dalam
dalam CSS

Apabila cuba memusatkan elemen HTML dalam keseluruhan tetingkap menggunakan sifat CSS kiri: 50%;, adalah mungkin untuk menghadapi situasi di mana elemen itu perlu dipusatkan secara khusus dalam induknya

. Untuk mencapai matlamat ini, kami boleh memanfaatkan gabungan sifat CSS.

Untuk induk

, gunakan CSS berikut:

text-align: center;

Salin selepas log masuk

Ini akan mendatar memusatkan semua kandungan dalam yang

Untuk kanak-kanak

yang kami mahu pusatkan secara khusus, kami menggunakan:

margin: auto;

Salin selepas log masuk

Menetapkan margin: auto; pada semua sisi secara automatik akan memusatkan kanak-kanak

dalam induknya. Sebagai alternatif, anda boleh menentukan margin auto pada bahagian tertentu untuk mengawal pemusatan mendatar atau menegak seperti yang diperlukan.

Contohnya:

margin: auto auto auto 0; /* Centers horizontally with right margin */
margin: auto 0 auto auto; /* Centers horizontally with left margin */

Salin selepas log masuk

Pendekatan ini membolehkan kawalan tepat ke atas pemusatan sesuatu elemen khusus dalam

, sambil mengekalkan penjajaran teks elemen lain dalam bekas.

Atas ialah kandungan terperinci Bagaimanakah Saya Memusatkan Elemen Di Dalam Ibu Bapa Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Menghidupkan Kecerunan Radial dalam CSS untuk Mencipta Kesan Kilauan? Artikel seterusnya：Bagaimanakah Saya Boleh Menukar Warna Butang Togol Navbar Bootstrap 4?

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

2459

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

2600

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

2192

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