如何左對齊居中內聯塊網格中的最後一行？

居中元素網格中的最後一行左對齊

問題：

設定為顯示的元素網格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中文網其他相關文章！