/ / Alinhar a Fundação 5 ao limpar os itens da caixa de luz para o centro - zurb-foundation

Alinhar a Fundação 5 ao limpar os itens da mesa para o centro - zurb-foundation

Eu estou tentando alinhar os itens em uma mesa de luz de compensação para o centro. A caixa de luz alinha os itens à esquerda como padrão. Aqui está a situação atual:

De acordo com isto resposta você pode alinhá-los no componente guias usando

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

Mas para a mesa de luz, ela apenas produz um comportamento errático, em que as miniaturas estão em uma posição aparentemente aleatória, mas alinhadas no centro horizontalmente:

insira a descrição da imagem aqui

Então eu me pergunto como fazer os itens alinhados ao centro e não todos para a esquerda.

Aqui está o código relevante:

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

Respostas:

2 para resposta № 1

Graças à sugestão de Niloct, este código me permitiu alinhar os itens como eu precisava:

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

Perguntas relacionadas


Comentários (0)

Adicione um comentário