Jquery Isotope - Unable to center multiple divs inside a container - Isotope causes the issue

Question

I'm using a combination of Bootstrap and PHP to create a Portfolio section.
I have around 12 items, and I want to display 4 of them on each row.

Problem is that no matter what I do, the units are stick to the left side of the container, and I seem unable to center them, even with all the searches here on SO.

Here's the code I'm using.

HTML

<section class="wow fadeInUp animated" data-wow-offset="200" id="portfolio">
    <div class="container">
        <h2>Portfolio</h2>

            <div class="filter">
            </div>

            <div class="thumb-container" >
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>
                <div class='thumb-unit'></div>  
        </div>
    </div>
</section>

CSS

.container{
    width: 70%;
}

#portfolio{
    height: 100%;
    background-color: white;
    padding-bottom: 50px;
}

#portfolio .filter{
    height: 50px;
    text-align: center;
    background: transparent;
    border-top: 1px solid #7f8c8d;
    border-bottom: 1px solid #7f8c8d;
    width: 100%;
    margin-top: 30px;
}

.thumb-container{
    width: 100%;
    margin: 15px auto;
    text-align: center;
    background: red;
}


.thumb-unit{
    width: 300px;
    height: 225px;
    display: inline-block;
    margin: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: blue;
}

How in this earth can I center those thumb-units inside the thumb-container? Any help highly appreciated.

EDIT

The weird thing is that on JSFiddle it works, but I don't understand why it doesn't on mine. Tried to refresh cache and on another browser, but the result is the same.

EDIT 2

I found out that the problem is isotope, the library I'm using for filtering.

Has anyone encountered this problem?

It looks centered on my [demo](http://jsfiddle.net/e3d6svmt/1/) — U r s u s, Jan 13 '15 at 11:59
It's also centred on a fiddle I just made, I suspect there is another CSS rule that is overriding your CSS rules here! Try inspecting the thumb-container block, and see if your rule above has a strikethrough, with another rule somewhere else that's taking precedence — Lee, Jan 13 '15 at 11:59
I know, right? I've tried the same code inside jsfiddle and it works, I don't even know why. That's what I missed in the question. — Phillip, Jan 13 '15 at 12:00
It's not working? http://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css — Playdome.io, Jan 13 '15 at 12:01
It's looks center aligned http://jsfiddle.net/shanidkv/g8wdsvqn/- Your code also perfect don't how you got that screenshot. try to clear browser cache and check. — shanidkv, Jan 13 '15 at 12:01
are you sure that bootstrap is not overriding your css rules? — rasso, Jan 13 '15 at 12:04
So you need to share your whole css and html. Or create a fiddle with all. — Shyam, Jan 13 '15 at 12:19
@Azarus that's a nice tip link. However for this case it wouldn't work as isotope creates position: absolute son the container. But thanks for that link ;) — rob.m, Jan 19 '15 at 15:04

score 0 · Answer 1 · answered Jan 13 '15 at 12:47

0

It´s look center aligned, but... if you are using Bootstrap, why dont you try to use this Bootstrap component?

http://getbootstrap.com/components/#thumbnails-custom-content

Your css code would be shorter.

answered Jan 13 '15 at 12:47

kurroman

978
10
12

Actually I used "thumb-unit" divs in this case, but in my actual code i'm using PHP. – Phillip Jan 13 '15 at 12:57
check my answer which solves that. It's all far more simple than that – rob.m Jan 19 '15 at 15:00
I did but I prefer a solution based on Bootstrap and avoid extra js code/plugins. He already is using Bootstrap, so... Just my opinion. – kurroman Jan 19 '15 at 16:27

Bhushan wagh · Answer 2 · 2015-01-13T13:04:10.373

0

.container{
    width: 70%;
    display:block;
    margin:0 auto;
    float:none
}


/**************************

http://jsfiddle.net/cd2js8m2/

**************************/

edited Jan 13 '15 at 13:04

answered Jan 13 '15 at 12:58

Bhushan wagh

187
1
14

isotope creates absolute positioning. Check my answer which might better help – rob.m Jan 19 '15 at 15:05

score 0 · Accepted Answer · answered Jan 13 '15 at 18:38

0

I was using jquery isotope - that was causing the issue.

I switched to MixItUp and now everything works just fine!

answered Jan 13 '15 at 18:38

Phillip

4,276
7
42
74

rob.m · Answer 4 · 2015-01-19T16:13:42.943

I am just working on something which needs exactly that. You need to use isotope v2 and use element sizing new feauture.

In jQuery you'd run:

var $container = $('#container').isotope({
 itemSelector: '.item',
 masonry: {
   columnWidth: '.grid-sizer'
 },
  isFitWidth: true
});

Your html woud look like this:

<div class=container">
  <div class="row">
    <div id="container">
      <div class="grid-sizer col-sm-2 col-md-4 col-lg-3"></div>
      <div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
      <div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
      <div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
    </div>
  </div> 
</div>

Not just this would center your layout but it will also be responsive. grid-sizer will be your columnWidth and it would change its width based on your bootstrap classes col..." making the whole thing responsive as you'd expect with bootstrap, on top of this the number of elements that you will see on each row will be based on your bootstrap class settings.

Jquery Isotope - Unable to center multiple divs inside a container - Isotope causes the issue

4 Answers4