如何在響應式網格中將容器居中並使子元素左對齊？

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

問題

您希望在響應式網格中顯示圖像，將它們水平居中並對齊他們留在每一行內，同時保持固定的距離。當瀏覽器視窗調整大小以適應每行的最大數量而不改變其大小時，圖像應自動換行。

解決方案

僅使用 CSS 實現所需的佈局可能具有挑戰性。以下是利用媒體查詢依照視窗尺寸調整內部div 寬度的方法：

程式碼

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fox 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;
    }
}</code>

<code class="html"><div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div></code>

注意事項

• 考慮使用適用於大量專案的JavaScript。
• CSS 預處理器可以增強程式碼的可重複使用性。
• 根據需要調整媒體查詢斷點以滿足您的要求。

以上是如何在響應式網格中將容器居中並使子元素左對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！