Bagaimana Memusatkan Elemen Kanak-Kanak Dalam Ibu Bapa `` Menggunakan 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;
}

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!