如何将被推到下一行的 Zurb Foundation 块网格元素居中对齐？

Question

我使用的是 Zurb Foundation 框架中的块状网格，但我在使其按照我想要的方式对齐时遇到了一些问题。我将其设置为每行显示 4 个块。我有超过 4 个块，所以不适合的块被推到下一行并向左对齐。我想要它，以便这些块像这样居中：

有办法吗？

到目前为止我的代码是这样的：

html

<ul class="small-block-grid-2 large-block-grid-4 thumbslist">
    {% for project in site.data.settings.projects %}
    <li>
    <a href="#" data-reveal-id="myModal{{ forloop.index }}" class="thumb-unit">
        <div class="thumb-overlay">
            <strong>{{ project.name }}</strong>
        </div>
        <div class="thumb" id="{{ project.folder }}" style="background-image: url(assets/img/{{ project.folder }}/thumb.png);"></div>
    </a>
    </li>
    {% endfor %}
</ul>

sass

.thumbslist
  margin: auto
  +clearfix

  li
    position: relative
    //display: inline-block
    display: block
    height: 200px 
    overflow: hidden
    padding: 0

 .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0

Answer 1

这是一个现代浏览器解决方案：使用 flexbox 布局并更改为 small-block-grid-3。目标 CSS 弹性规则 <=991px。

.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
@media (max-width: 991px) {
  .thumbslist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

<ul class="small-block-grid-3 large-block-grid-4 thumbslist">
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
</ul>

Codeply

Answer 2

您需要使您的列表项不浮动，以便您可以利用父元素上的 text-align: center：

.thumbslist
  margin: auto
  //+clearfix
  text-align: center // add

  li
    position: relative
    display: inline-block // add
    height: 200px 
    overflow: hidden
    padding: 5px
    float: none // add

  .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0

如何将被推到下一行的 Zurb Foundation 块网格元素居中对齐？

How to center align Zurb Foundation block grid elements that are being pushed to the next row?

html

sass

zurb-foundation