/ / Align Foundation 5 изчиства елементите на светлинната кутия до центъра - zurb-foundation

Подравнете фондацията 5 за изчистване на елементите на светлинната кутия в центъра - основата на зърната

Опитвам се да подредя елементите в изчистваща светлина в центъра. Светлинната кутия подравнява елементите вляво по подразбиране. Ето и настоящата ситуация:

Според това отговор, можете да ги подредите в компонента на раздели, като използвате

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

Отговори:

2 за отговор № 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;
}

Свързани въпроси


Коментари (0)

Добави коментар