Vorschaubilder in der LightGallery

Question

Ich benutze LightGallery, um eine Bildergalerie zu erstellen und alles funktioniert soweit, aber ich möchte das gesamte Raster der Vorschaubilder auf die Mitte der Seite ausrichten. Gerade jetzt ist nur nach links side.Here der Code steckte ich verwendet:

<div class="demo-gallery"> 
<ul id="lightgallery" class="list-unstyled row"> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/alba-iulia.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive" src="img/alba-iulia.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/3.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive" src="img/3.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/1.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive" src="img/1.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 375, img/1.jpg 480, img/3.jpg 800" data-src="img/alba.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive" src="img/alba.jpg"> 
    </a> 
</li> 
</ul> 
</div> 

EDIT: Hier ist die CSS:

.demo-gallery{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 1120px; 
    margin-top: 50px; 
} 

.demo-gallery > ul { 
    margin-bottom: 0; 
} 
.demo-gallery > ul > li { 
    float: left; 
    margin-bottom: 15px; 
    margin-right: 0px; 
    width: 280px; 
} 
.demo-gallery > ul > li a { 
    border: 3px solid #FFF; 
    border-radius: 3px; 
    display: block; 
    overflow: hidden; 
    position: relative; 
    float: left; 
    text-align: center; 
} 
.demo-gallery > ul > li a > img { 
    -webkit-transition: -webkit-transform 0.15s ease 0s; 
    -moz-transition: -moz-transform 0.15s ease 0s; 
    -o-transition: -o-transform 0.15s ease 0s; 
    transition: transform 0.15s ease 0s; 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    height: 100%; 
    width: 100%; 
} 
.demo-gallery > ul > li a:hover > img { 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
    transform: scale3d(1.1, 1.1, 1.1); 
} 
.demo-gallery > ul > li a:hover .demo-gallery-poster > img { 
    opacity: 1; 
} 
.demo-gallery > ul > li a .demo-gallery-poster { 
    background-color: rgba(0, 0, 0, 0.1); 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    -webkit-transition: background-color 0.15s ease 0s; 
    -o-transition: background-color 0.15s ease 0s; 
    transition: background-color 0.15s ease 0s; 
} 
.demo-gallery > ul > li a .demo-gallery-poster > img { 
    left: 50%; 
    margin-left: -10px; 
    margin-top: -10px; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    -webkit-transition: opacity 0.3s ease 0s; 
    -o-transition: opacity 0.3s ease 0s; 
    transition: opacity 0.3s ease 0s; 
} 
.demo-gallery > ul > li a:hover .demo-gallery-poster { 
    background-color: rgba(0, 0, 0, 0.5); 
} 
.demo-gallery .justified-gallery > a > img { 
    -webkit-transition: -webkit-transform 0.15s ease 0s; 
    -moz-transition: -moz-transform 0.15s ease 0s; 
    -o-transition: -o-transform 0.15s ease 0s; 
    transition: transform 0.15s ease 0s; 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    height: 100%; 
    width: 100%; 
} 
.demo-gallery .justified-gallery > a:hover > img { 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
    transform: scale3d(1.1, 1.1, 1.1); 
} 
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img { 
    opacity: 1; 
} 
.demo-gallery .justified-gallery > a .demo-gallery-poster { 
    background-color: rgba(0, 0, 0, 0.1); 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    -webkit-transition: background-color 0.15s ease 0s; 
    -o-transition: background-color 0.15s ease 0s; 
    transition: background-color 0.15s ease 0s; 
} 
.demo-gallery .justified-gallery > a .demo-gallery-poster > img { 
    left: 50%; 
    margin-left: -10px; 
    margin-top: -10px; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    -webkit-transition: opacity 0.3s ease 0s; 
    -o-transition: opacity 0.3s ease 0s; 
    transition: opacity 0.3s ease 0s; 
} 
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster { 
    background-color: rgba(0, 0, 0, 0.5); 
} 
.demo-gallery .video .demo-gallery-poster img { 
    height: 48px; 
    margin-left: -24px; 
    margin-top: -24px; 
    opacity: 0.8; 
    width: 48px; 
} 
.demo-gallery.dark > ul > li a { 
    border: 3px solid #04070a; 
} 
.home .demo-gallery { 
    padding-bottom: 80px; 
} 

ich auf einen Beitrag lesen aus, dass ich margin-left verwenden : auto und margin-right: auto (Ich habe es auf der ul verwendet, aber scheint nicht zu funktionieren.) Danke für Ihre Hilfe!

Answer 1

mit folgendem Code Ersetzen Sie den Code, wird Ihr Problem lösen:

<div class="demo-gallery"> 
<ul id="lightgallery" class="list-unstyled row"> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/alba-iulia.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive text-center" src="img/alba-iulia.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/3.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive text-center" src="img/3.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 480, img/1.jpg 480, img/3.jpg 800" data-src="img/1.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive text-center" src="img/1.jpg"> 
    </a> 
</li> 
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/alba-iulia.jpg 375, img/1.jpg 480, img/3.jpg 800" data-src="img/alba.jpg" data-sub-html=""> 
    <a href=""> 
     <img class="img-responsive text-center" src="img/alba.jpg"> 
    </a> 
</li> 
</ul> 
</div> 

Answer 2

Sie lesen richtig. Sie können ein Blockelement wie div zentrieren, indem Sie margin-left: auto; und margin-right: auto; oder in den meisten Fällen nur margin: auto; anwenden. Aber Sie sollten es für eine bestimmte Breite div anwenden. Also in Ihrem Fall:

1. Sie sind es für ul anwenden. was nicht funktionieren wird, da du 100%div es wickelst.
2. Sie haben (wahrscheinlich) nicht die Breite der äußersten div eingestellt, die eine 100% Breite standardmäßig haben wird:

Sie dies tun könnte:

.demo-gallery { 
    width: 1120px; 
    margin: auto; 
    display: block; //the parent should be a block element 
} 

Hier ist ein Stift in Aktion: http://codepen.io/asim-coder/pen/jrPMPX

Ich fügte background-color hinzu und änderte die width für die Vereinfachung des Konzepts.

Ich nehme an, Sie verwenden BootStrap, (da Sie verwenden list-unstyled, row, col-*-* Klassen), dann brauchen Sie nicht den Kopf zu drehen, um ihn herum. Verwenden Sie einfach die Klassen BootStrap bietet.

Like:

<div class="demo-gallery container"> 
<ul id="lightgallery" class="list-unstyled row"> 
<li class="col-xs-6 col-sm-4 col-md-3"> 
    <a href=""> 
     <img class="img-responsive" src="img/alba-iulia.jpg"> 
    </a> 
</li> 
.... 
</div> <!-- end container -->