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了解详情。

希望这可以让你在路上！祝你好运！

调整窗口大小时居中图像

1 个答案: