将 Foundation 5 清除灯箱项目与中心对齐

Question

我正在尝试将清除灯箱中的项目与中心对齐。灯箱默认将项目左对齐。这是目前的情况：

根据 this 的回答，您可以使用

在选项卡组件中对齐它们

float: none !important;
 display: inline-block;

但对于灯箱，它只会产生不稳定的行为，其中缩略图处于明显随机的位置，但水平居中对齐：

所以我想知道如何使项目居中对齐而不是全部靠左。

相关代码如下：

CSS:

[class*="clearing-thumbs"]
{
/* top  right  bottom left*/
    margin:  5% 0 0 0;
    text-align: center;
    padding: 0.25 0 0.5rem 0;
}

  [class*="clearing-thumbs"] > li
{
    padding: 0.025 0 0.5rem 0;
/*
    float: none !important;
    display: inline-block;
    top:0%;
*/
}

HTML/JS:

 function load(listaSucursales.data)
{

var output = '<div class="row"><div class="small-11 small-centered columns" >';
        output += '<ul class="clearing-thumbs" data-clearing>';

        for(var x in listaSucursales.data)
        {

        output+='<li> <div class="square">'+ listaSucursales.data[x].NOMBRE +"</div></li> ";

        }

        output+= '</ul> </div></div>';

    document.getElementById("mainContent").innerHTML=output;
}

Answer 1

感谢 Niloct 的建议，此代码允许我根据需要对齐项目：

[class*="clearing-thumbs"]
{
    margin:  5% 0 0 0;
    text-align: center;
    padding: 0.25 0 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

  [class*="clearing-thumbs"] > li
{
     padding: 0.025 0 0.5rem 0;
}

将 Foundation 5 清除灯箱项目与中心对齐

Align Foundation 5 clearing lightbox items to the center

zurb-foundation