如何在响应式网格中将容器居中并使子元素左对齐？-css教程-PHP中文网

如何在响应式网格中将容器居中并使子元素左对齐？

Mary-Kate Olsen

发布： 2024-11-01 17:34:02

原创

637 人浏览过

How to Center a Container and Left-Align Child Elements in a Responsive Grid?

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

问题

您希望在响应式网格中显示图像，将它们水平居中并对齐他们留在每一行内，同时保持固定的距离。当浏览器窗口调整大小以适应每行的最大数量而不改变其大小时，图像应自动换行。

解决方案

仅使用 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>

登录后复制