将响应式缩略图库居中

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

添加这些更改并删除您在ul 上设置的!important 的那些left-margins

.thumbnails > li {
  display: inline-block;
  float: none;
  margin-bottom: 20px;
  margin-left: 20px;
}

.thumbnails {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

重要提示：将此添加到您的 css/mystyles.css 文件的末尾。

Answer 2

添加这个 CSS 媒体查询

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

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