Zurb foundation 对齐基础5清除灯箱项目到中心

我正在尝试将一个空白灯箱中的项目与中心对齐。默认情况下，lightbox将项目向左对齐。目前的情况如下：

根据答案，您可以在选项卡组件中使用

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

但对于lightbox，它只会产生一种不稳定的行为，即缩略图处于明显的随机位置，但中心水平对齐：

因此，我想知道如何使项目对齐的中心，而不是所有的左边

以下是相关代码：

CSS:

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;
}

函数加载（listaSucursales.data）
{
var输出=“”；
输出+='
；
for（listaSucursales.data中的变量x）
{
输出+='
'+listaSucursales.data[x].NOMBRE+“
”；
}
输出+='
'；
document.getElementById（“mainContent”）.innerHTML=输出；
}

感谢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;
}

研究此：，然后尝试对

ul

使用

display:flex

，并对

li

进行对齐

[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;
}