texto - Centro de isótopos jQuery

change text jquery

Question

Posible duplicado:
¿Cómo centrar DIV en DIV?

Por favor, eche un vistazo a la imagen de abajo:

¿Cómo puedo hacer que los cuadrados grises se centren horizontalmente dentro del contenedor rojo div? Todo esto está hecho con isótopo, así que tenlo en cuenta.

Gracias por adelantado.

Incluso si el div principal (rojo) siempre está alineado en el medio, los grises, los más pequeños no lo están. En la imagen superior, cuando se alinean en una sola columna, esa columna debe estar en el centro exacto de la envoltura (rojo) div.

Answer 1

En realidad, es muy sencillo implementar el centrado de Isótopo (acaba de terminar un sitio que hace esto para que se vea bien en dispositivos táctiles móviles y dispositivos de escritorio). Simplemente incluya este bit de código del repositorio de David DeSandro antes del código Isótopo habitual al final de este bloque

<!-- 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>

Y luego acaba de configurar Isótopo como de costumbre

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

Answer 2

La solución más simple encontrada. Use el diseño de "mampostería" dentro de Isótopo:

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