如何將容器居中對齊並將子元素與響應列左對齊？

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

您的問題旨在在網頁上顯示動態數量的圖像，這些圖像居中且連續對齊而不調整大小。子元素應該組合在一起並間隔開。

要實現這一點，您可以利用 CSS 中的媒體查詢。提供的程式碼示範如何：

<code class="css">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;
    }
}</code>

此程式碼包含針對不同螢幕尺寸的特定媒體查詢，以確保動態調整內部 div 的寬度。請注意，您可能需要根據您的要求調整裝訂線（邊距）大小。

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