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
}
});