jQuery isotope centering [duplicate]

Question

Possible Duplicate:
How to center DIV in DIV?

Please take a look at the image below:

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.

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.

Deserve

absolutely not. because the current effect is achieved trough javascript (isotope) – Deserve

Which calculates the position based on the containing div – Lutyens

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. – Deserve

see my answer for a working example! – Lutyens

See centering solution in answer below. Basically, it extends Isotope with additional code as recommended on David DeSandro's website. – Agranulocytosis

Updated my answer with working example, see below. – Agranulocytosis

This is not a duplicate of "DIV within a DIV" – Harding

It's Isotope!!! how is this a duplicate of something that has nothing to do with Isotope's logic ? – Azikiwe

Answer 1

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>

Agranulocytosis

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. – Maddeu

I'm struggling to use this with gutters. The gutters aren't working. – Nitrification

This works, but only when I scale the browser down. Nothing happens when I scale up again. Nobody else with the same issue? – Midgut

Having problems putting this together, is the answer outdated? If not, could we get a fiddle example? – Hypoblast

Answer 2

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

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

Deserve

the question was for isotope not masonry! – Lutyens

Works for Isotope too. – Castano

Worth noting that masonry is part of Isotope. Use it inside Isotope this way: $container.isotope({ itemSelector: '.pbox', masonry: { isFitWidth: true }, }); – Lemay