html - 调整窗口大小时居中图像

Question

我显示了很多图片。调整窗口大小时，我希望能够将适合窗口的图像数量居中。目前，当浏览器窗口调整大小时，它会向左对齐。

li {
    float:left; 
    display: inline-block;
    margin: 10px;
    width: 250px;
    max-width: 100%;
    text-align:center;
}

.itemS{
    max-width:1366px;   
    text-align:center;
    margin: 0 auto;
}
.itemS.itemType{
    width: 250px;
    padding:10px;
    background-color:#333;
    position:absolute;
    top:0px;
    text-align:center; 
}

Answer 1

我相信您想要的是 CSS 媒体查询。您在查询中设置断点，当浏览器窗口大于或小于断点时，将应用您的新样式。

如果这是你的初始风格:

li {
    float:left; 
    display: inline-block;
}

当浏览器窗口低于 768 时，您可能想更改 div，您可以这样更改样式:

@media all and (max-width: 768px) {
    li {
        float: none;
        margin: 0 auto;
    }
}

阅读更多信息 CSS-Tricks或在 this answer .

希望这可以帮助您上路!祝你好运!