居中對齊容器並左對齊子元素
您的問題旨在在網頁上顯示動態數量的圖像，這些圖像居中且連續對齊而不調整大小。子元素應該組合在一起並間隔開。
要實現這一點，您可以利用 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中文網其他相關文章！
