Bagaimana Memusatkan Elemen Kanak-Kanak Dalam Ibu Bapa `` Menggunakan CSS?-tutorial css-php.cn

How to Center a Child Element Within a Parent `` Using CSS?

Memusatkan Elemen dalam

Apabila menggunakan CSS untuk memusatkan elemen dengan kiri: 50%;, penjajaran adalah relatif kepada keseluruhan tetingkap. Walau bagaimanapun, apabila memusatkan elemen dalam induk

, kami mahu penjajaran adalah relatif kepada elemen yang mengandunginya.

Penyelesaian

Untuk mencapai ini, kita boleh menggunakan gabungan teks -selaraskan: tengah; dan margin: auto; Sifat CSS.

Langkah 1: Jajarkan Induk

Pusat

Tetapkan penjajaran teks: tengah; kepada ibu bapa

unsur. Ini akan memusatkan semua elemen anaknya di dalamnya.

Langkah 2: Pusatkan Anak Tertentu Menggunakan Margin

Setelah ibu bapa

adalah sejajar, kita perlu memusatkan elemen kanak-kanak tertentu. Guna margin: auto; kepada elemen kanak-kanak. Ini secara automatik akan memusatkan elemen dalam induk

, tanpa mengira lebar elemen anak.

Untuk kejelasan, berikut ialah contoh:

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

Salin selepas log masuk

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

Artikel sebelumnya：Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Navbar Saya pada Tatal? Artikel seterusnya：Mengapa Elemen Input Tahap Sekat Sentiasa Mengisi Bekasnya Seperti Div?

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

2718

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

2840

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

2393

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