jquery - 使 float 的 div 居中

Question

我正在尝试使 float 的 div 居中。 .imgContainer 元素必须有一个 float:left 属性，否则代码会中断。我试过 display:inline-block 但这会导致我的 jquery 代码停止正常工作。

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

我创建了一个代码笔来演示我的问题。 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%;
 }