如何左对齐居中内联块网格中的最后一行？

居中元素网格中的最后一行左对齐

问题：

设置为显示的元素网格inline-block 水平居中，但最后一行不是左对齐。相反，它像其他行一样居中。

显示内联块的解决方案：

这种自适应网格更容易实现，并且适应。

示例：

<div>

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

说明：

• 网格容器 (#容器）使用边距居中：0 auto。
• 块设置为显示：内联块，并具有相等的宽度和边距。
• 通过媒体查询调整容器的宽度，以在不同的屏幕尺寸上保持居中对齐。

以上是如何左对齐居中内联块网格中的最后一行？的详细内容。更多信息请关注PHP中文网其他相关文章！