如何使用媒體查詢將容器居中並使子元素左對齊？

居中對齊容器並左對齊子元素

在這種情況下，您有多個尺寸相同的圖像，想要顯示在網頁。您的目標是將它們一個接一個地分組在頁面的中心，並且它們之間的距離固定。

給定的 CSS 程式碼嘗試使用 text-align: center 將容器在頁面中居中，但它沒有解決子圖像的對齊問題。結果是影像線性顯示，沒有任何居中或固定間距。

更全面的解決方案需要考慮多個視口大小並應用媒體查詢為包含圖像的內部 div 設定適當的寬度。程式碼如下：

<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>

透過根據視窗大小調整內部 div 的寬度，您可以實現居中影像的所需佈局，並根據需要進行包裝以適應可用空間。請注意，這種方法對於大量圖像可能不是最佳的，因為它涉及多個媒體查詢。

以上是如何使用媒體查詢將容器居中並使子元素左對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！