如何将容器居中对齐并将子元素与响应列左对齐？

居中对齐容器并左对齐子元素

您的问题旨在在网页上显示动态数量的图像，这些图像居中且连续对齐而不调整大小。子元素应该组合在一起并间隔开。

要实现这一点，您可以利用 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中文网其他相关文章！