如何將具有左對齊子元素和響應影像的容器居中？-css教學-PHP中文網

如何將具有左對齊子元素和響應影像的容器居中？

Patricia Arquette

發布： 2024-11-02 08:42:29

原創

872 人瀏覽過

How to Center a Container with Left-Aligned Child Elements and Responsive Images?

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

本題旨在在頁面居中的容器中顯示圖像，其中圖像組合在一起並一個接一個地顯示。挑戰在於保持影像之間的固定距離，同時適應不同的瀏覽器視窗寬度。

要使用 CSS 實作此佈局，可以使用媒體查詢根據視窗大小調整包含圖片的 div 的寬度。下面的程式碼示範了這個方法：

body { margin: 10px 0; }
.outer { text-align: center; }
.inner { 
  font-size: 0; /* fix for inline gaps */
  display: inline-block;
  text-align: left;
}
.item {
  font-size: 16px; /* reset font size */
  display: inline-block;
  margin: 5px; /* gutter */
}
.item img { vertical-align: top; }
@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; }
}

登入後複製

在HTML 結構中：

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

登入後複製

此方法使用媒體查詢在瀏覽器視窗大小調整時動態調整內部div 的寬度。寬度是根據每個圖像的大小以及圖像之間所需的裝訂線來計算的。每行的圖像數量會根據瀏覽器寬度自動變化。

需要注意的是，如果處理大量影像，建議最佳化程式碼以提高效能。此外，請考慮使用 Flexbox 或 CSS 預處理器以獲得更靈活的解決方案。

以上是如何將具有左對齊子元素和響應影像的容器居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！