CODEWITHSUNDEEP
jqueryhtmlcss
smither123
smither123

Reputation: 357

Centering a floated div

I'm trying to center a floated div. The .imgContainer element must have a float:left attribute because otherwise the code breaks. I have tried display:inline-block but that causes my jquery code to stop working correctly.

What i have tried to do is wrap it in a wrap div and then try to center that div which that isn't working either.

I have created a codepen to demonstrate my issue. 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%;
 }

Upvotes: 0

Views: 43

Answers (1)

Jascha Goltermann
Jascha Goltermann

Reputation: 1124

try this css and let me know if that is what you imagined.

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

Upvotes: 1

Related Questions