将响应式缩略图库居中

Question

这是我的网站：

http://www.gregorydanelian.comule.com/ken

我希望缩略图库始终居中，但我无法做到这一点。

我知道我可以使用

text-align: center;

在父元素上，然后设置缩略图，如下所示：

display: inline-block;

然而，没有任何效果，缩略图总是向左浮动。

我尝试添加媒体查询以强制左边距（例如）：

@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;   
}
}

但无论宽度是多少，都必须有一种更简单的方法让 ul 居中。

如何将缩略图库置于所有浏览器宽度的中心？

Answer 1

添加此CSS媒体查询

@media (min-width: 1200px)
.thumbnails {
    max-width:1200px
}       

您可能需要针对多个屏幕调整媒体查询。

Answer 2

添加这些更改并移除left-margins上设置!important的{​​{1}}

ul

重要：将其添加到.thumbnails > li { display: inline-block; float: none; margin-bottom: 20px; margin-left: 20px; } .thumbnails { margin: 0 auto; text-align: center; width: 100%; } 文件的末尾。