首页 >web前端 >css教程 >如何将容器居中对齐并将子元素与响应列左对齐?

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

Susan Sarandon
Susan Sarandon原创
2024-11-02 14:20:30276浏览

How to Center Align Container and Left Align Child Elements with Responsive Columns?

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn