对齐基金会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;
}