Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-kanak Jajaran Kiri dengan Pertanyaan Media?

Bekas Jajar Tengah dan Jajar Kiri Elemen Anak

Dalam senario ini, anda mempunyai berbilang imej dengan dimensi yang sama yang anda mahu paparkan pada laman web. Matlamat anda adalah untuk mengumpulkannya bersama di tengah halaman, satu demi satu, dengan jarak tetap antara mereka.

Kod CSS yang diberikan cuba memusatkan bekas dalam halaman menggunakan penjajaran teks: tengah , tetapi ia tidak menangani penjajaran imej kanak-kanak. Hasilnya ialah imej dipaparkan secara linear, tanpa sebarang pemusatan atau jarak tetap.

Penyelesaian yang lebih komprehensif memerlukan mempertimbangkan berbilang saiz port pandangan dan menggunakan pertanyaan media untuk menetapkan lebar yang sesuai untuk div dalam yang mengandungi imej. Berikut ialah kodnya:

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner {
    width: 440px; /* (100+5+5)x4 */
  }
}

@media (max-width: 441px) {
  .inner {
    width: 330px;
  }
}

@media (max-width: 331px) {
  .inner {
    width: 220px;
  }
}

@media (max-width: 221px) {
  .inner {
    width: 110px;
  }
}</code>

Dengan melaraskan lebar div dalam berdasarkan saiz viewport, anda boleh mencapai susun atur imej berpusat yang diingini, dibalut mengikut keperluan agar sesuai dengan ruang yang tersedia. Ambil perhatian bahawa pendekatan ini mungkin tidak optimum untuk sejumlah besar imej, kerana ia melibatkan berbilang pertanyaan media.

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