Question

我正试图将浮动的div放在中心位置。 .imgContainer元素必须具有 float:left属性，因为否则代码会中断。我尝试了display:inline-block，但这导致我的jquery代码停止正常工作。

我试图将其包装在wrap div中，然后尝试将那个不起作用的div居中。

我已经创建了一个codepen来演示我的问题。 http://codepen.io/anon/pen/EjGwNw

Html：

<div class="wrap">
  <div class="galleryWrap">
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="projects"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="websites"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="projects"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="websites"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>


    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="projects"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="websites"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="websites"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
    <a class="fancybox imgContainer" data-fancybox-group="gallery" data-filter="websites"><img src="http://www.devsourcecodex.com/images/advertisingexamples/200x200.png" alt="" /></a>
  </div>
</div>

的CSS：

  .wrap {
   float: left;
   position: relative;
   left: 50%;
 }

 .imgContainer {
   width: 400px;
   height: 400px;
   border: solid 1px #999;
   margin: 0px 0px 0px 0px;
   float: left;
   position: relative;
   left: -50%;
 }

 img {
   width: 100%;
   height: 100%;
 }

Answer 1

尝试这个css并让我知道这是否是你想象的。

 .wrap {
   position: relative;
   width: 100%;
   text-align: center;
 }

 .imgContainer {
   width: 400px;
   height: 400px;
   border: solid 1px #999;
   margin: 0px 0px 0px 0px;
   position: relative;
   display: inline-block;
 }

 img {
   width: 100%;
   height: 100%;
 }

以浮动的div为中心

1 个答案: