如何居中对齐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>

上海社会科学院

.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

您需要使列表项不浮动,以便您可以利用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