/ / Richten Sie die Lightbox-Objekte auf das Zentrum aus - zurb-foundation

Richten Sie die Foundation 5 so aus, dass die Lightbox-Objekte in der Mitte liegen - zurb-foundation

Ich versuche, die Objekte in einem leuchtenden Leuchtkasten in der Mitte auszurichten. Der Leuchtkasten richtet die Elemente standardmäßig nach links aus. Hier ist die aktuelle Situation:

Gemäß diese antworten Sie können sie in der Tabs-Komponente mit ausrichten

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

Aber für den Leuchtkasten ergibt sich nur ein unregelmäßiges Verhalten, bei dem die Thumbnails in einer scheinbar zufälligen Position und dennoch horizontal ausgerichtet sind:

Bildbeschreibung hier eingeben

Also frage ich mich, wie man die Objekte auf die Mitte und nicht auf die linke Seite ausrichten kann.

Hier ist der relevante Code:

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

Antworten:

2 für die Antwort № 1

Dank des Nilact-Vorschlags erlaubte mir dieser Code, die Items so auszurichten, wie ich es brauchte:

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

Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen