jQuery isotope centering

Question

Possible Duplicate:
How to center DIV in DIV?

Please take a look at the image below:

enter image description here

How can I make the grey squares horizontally centered inside the red container div? This is all made with isotope, so please keep that in mind.

Thanks in advance.

enter image description here

Even if the parent (red) div is always aligned in the middle, the grey, smaller ones are not. In the top image, when they are aligned in one single column, that column should be in the exact middle of the wrapper (red) div.

absolutely not. because the current effect is achieved trough javascript (isotope) — , Aug 26 '12 at 16:57
well, it doesn't work anyway, I've also tried by putting a wrapper div between the red one and the smaller grey ones, but still, no luck. — , Aug 26 '12 at 17:09
See centering solution in answer below. Basically, it extends Isotope with additional code as recommended on David DeSandro's website. — Systembolaget, Aug 26 '12 at 18:10
It's Isotope!!! how is this a duplicate of something that has nothing to do with Isotope's logic ? — justme, Jul 29 '16 at 08:17

score 21 · Answer 1 · edited May 20 '13 at 17:42

It's actually very simple to implement centering for Isotope (just finished a site that does this to look good on mobile touch devices as well as desktop devices). You just include this bit of code from David DeSandro's repository before the usual Isotope code at the end of this block

<!-- centered layout extension http://isotope.metafizzy.co/ --> 

<script type="text/javascript">
$.Isotope.prototype._getCenteredMasonryColumns = function() {

    this.width = this.element.width();

    var parentWidth = this.element.parent().width();

    var colW = this.options.masonry && this.options.masonry.columnWidth || // i.e. options.masonry && options.masonry.columnWidth

    this.$filteredAtoms.outerWidth(true) || // or use the size of the first item

    parentWidth; // if there's no items, use size of container

    var cols = Math.floor(parentWidth / colW);

    cols = Math.max(cols, 1);

    this.masonry.cols = cols; // i.e. this.masonry.cols = ....
    this.masonry.columnWidth = colW; // i.e. this.masonry.columnWidth = ...
};

$.Isotope.prototype._masonryReset = function() {

    this.masonry = {}; // layout-specific props
    this._getCenteredMasonryColumns(); // FIXME shouldn't have to call this again

    var i = this.masonry.cols;

    this.masonry.colYs = [];
        while (i--) {
        this.masonry.colYs.push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function() {

    var prevColCount = this.masonry.cols;

    this._getCenteredMasonryColumns(); // get updated colCount
    return (this.masonry.cols !== prevColCount);
};

$.Isotope.prototype._masonryGetContainerSize = function() {

    var unusedCols = 0,

    i = this.masonry.cols;
        while (--i) { // count unused columns
        if (this.masonry.colYs[i] !== 0) {
            break;
        }
        unusedCols++;
    }

    return {
        height: Math.max.apply(Math, this.masonry.colYs),
        width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth // fit container to columns that have been used;
    };
};
</script>

And then you just set up Isotope as usual

<script type="text/javascript">
$(function() {
    var $container = $('#container');
    // the usual stuff for layouting, sorting, filtering, limiting clicks to zones...
</script>

Also, make sure that you container's `margin-right` and `margin-left` are explicitly set to `auto`. Otherwise it wont work, atleast not in chrome. — soundswaste, Oct 26 '13 at 14:19
I'm struggling to use this with gutters. The gutters aren't working. — Dan Hanly, Nov 20 '13 at 11:44
This works, but only when I scale the browser down. Nothing happens when I scale up again. Nobody else with the same issue? — Leopold Kristjansson, May 07 '14 at 00:38
Having problems putting this together, is the answer outdated? If not, could we get a fiddle example? — Mizipzor, Jul 29 '14 at 20:15

score 13 · Answer 2 · edited Jul 22 '15 at 10:15

13

Simplest solution found. Use the "masonry" layout inside Isotope:

$container.isotope({ 
  itemSelector: '.pbox', 
  layoutMode: 'masonry',
  masonry: { 
    isFitWidth: true 
  }
});

edited Jul 22 '15 at 10:15

Chuck Le Butt

47,570
62
203
289

answered Aug 26 '12 at 17:51

2

the question was for isotope not masonry! – Blowsie Aug 26 '12 at 17:53
2

Works for Isotope too. – Diana Oct 17 '14 at 23:57
5

Worth noting that masonry is part of Isotope. Use it inside Isotope this way: `$container.isotope({ itemSelector: '.pbox', masonry: { isFitWidth: true }, });` – jrenouard Nov 19 '14 at 21:03

jQuery isotope centering

2 Answers2

Linked