0

我正在使用 LightGallery 制作图片库，到目前为止一切正常，但我想将整个缩略图网格与页面中心对齐。现在只是卡在左侧。这是我使用的代码：

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

编辑：这是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;
}

我在一篇文章中读到我应该使用 margin-left: auto 和 margin-right: auto （我在 ul 上使用过，但似乎不起作用。）感谢您的帮助！

4

3 回答 3

0

用以下代码替换您的代码，将解决您的问题：

<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>
于 2016-06-02T09:49:54.400 回答
0

你没看错。您可以div通过应用margin-left: auto;和margin-right: auto;或在大多数情况下仅将块元素居中对齐margin: auto;。但是您应该将其应用于特定的宽度div。所以在你的情况下：

  1. 你正在申请它ul。这是行不通的，因为你已经100% div包装了它。
  2. 您（可能）没有设置最外层的宽度，默认情况下div它有一个100%宽度：

你可以这样做：

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

这是一支笔在行动：http ://codepen.io/asim-coder/pen/jrPMPX

我添加background-color并更改了width简化概念。

我想你正在使用BootStrap，（因为你正在使用list-unstyled, row,col-*-*类）那么你不需要绕着它转头。只需使用BootStrap提供的类。

喜欢：

<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 -->
于 2016-06-02T09:57:09.493 回答
0

删除col-xs-6 col-sm-4 col-md-3类并将 div 包装在以中心为中心.demo-gallery的其他 divtext-align中。

<div style="text-align:center">
    <div class="demo-gallery">
        ....
    </div>    
</div>
于 2018-09-03T09:02:47.100 回答