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

Question

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

有办法吗？

到目前为止，这是我的代码的样子:

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

您需要让您的列表项不 float ，以便您可以在父元素上利用 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