Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-kanak Jajaran Kiri Menggunakan CSS?

Bekas Penjajaran Tengah dan Elemen Kanak-Kanak Penjajaran Kiri

Untuk mencapai reka letak yang diingini di mana imej dipaparkan dalam bekas berpusat dengan tetap jarak, kita perlu mempertimbangkan pelbagai sifat CSS:

Memusatkan Bekas:

• Gunakan text-align: center; pada bekas induk (div luar) untuk memusatkannya secara mendatar pada halaman.

Mencipta Bekas Elemen Kanak-kanak:

• Balut imej dalam div dalam (dalam-div) untuk mengawal penjajarannya.

Menetapkan Dimensi Imej:

• Kekalkan dimensi imej yang konsisten (tinggi dan lebar ) untuk memastikan penjajaran. Gunakan sifat ketinggian dan lebar pada teg img.

Menambah Parit:

• Perkenalkan jidar kecil (margin: 10px;) antara kanak-kanak elemen (tag img) dalam div dalam. Ini akan mewujudkan jarak tetap antara imej.

Penjajaran Mendatar:

• Tetapkan paparan: sebaris; pada bekas elemen kanak-kanak (div-dalam) untuk memaparkan elemen kanak-kanak (imej) secara mendatar.

Elemen Kanak-kanak Menjajarkan Kiri:

• Gunakan text-align: left; pada bekas elemen anak (inner-div) untuk menjajarkan elemen anak (imej) di dalamnya.

Reka Bentuk Responsif:

• Untuk melaraskan lebar bekas berdasarkan saiz skrin, gunakan pertanyaan media. Dalam contoh yang diberikan, lebar dalam-div dilaraskan untuk lebar port pandangan yang berbeza.

Dengan mengikuti langkah-langkah ini dan melaksanakan coretan kod yang disediakan, anda boleh mencapai reka letak yang diingini dengan imej berpusat di dalam bekas, dipaparkan satu demi satu, dan dengan jarak yang tetap.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-kanak Jajaran Kiri Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!