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

Isu terkini