Pregunta

Fiddle

Tengo un div que está centrado usando la fundación.Dentro de ese div, tengo 215 x 215 divs que tienen imágenes de fondo del trabajo que he hecho.

He recibido Packery para trabajar bien.Mi problema es que quiero centrar estos divs dentro de su contenedor.Pero nunca sé cuántas divitas estarán en una sola fila, así que no puedo simplemente darles relleno porque se estrelló si la imagen le doy el relleno para que vaya a una nueva fila.

¿Cómo puedo arreglar esto?

¡Gracias!

Aquí está mi HTML

<div id="myWork" class="row">
    <div id="container" class="js-packery large-11 large-centered columns" data-packery-options='{ "itemSelector": ".item", "gutter": 20 }'>
        <div class="item" id="abgCapital">

        </div>
        <div class="item" id="voipInnovations">

        </div>
        <div class="item" id="payday">

        </div>
        <div class="item" id="inspira">

        </div>
    </div>
</div>

css

#myWork {
  margin-top: 30px;
  display: block;
  background-color: orange; }

#container {
  background-color: green; }

.item {
  width: 215px; }

#abgCapital {
  height: 215px;
  width: 215px;
  background-image: url(../img/abg_square_icon.png);
  background-size: cover;
  margin-left: auto;
  margin-right: auto; }

#voipInnovations {
  height: 215px;
  width: 215px;
  background-image: url(../img/vi_square_icon.png);
  background-size: cover; }

#payday {
  height: 215px;
  width: 215px;
  background-image: url(../img/pday_icon_square.png);
  background-size: cover; }

#inspira {
  height: 215px;
  width: 215px;
  background-image: url(../img/insp_square_icon.png);
  background-size: cover; }

¿Fue útil?

Solución

Suena como si quiere que los DIV fluyan como texto alineado en el centro.Actualicé tus estilos para hacer eso:

#container {
  background-color: green;
  text-align: center;
  height: auto !important;
  padding-top: 5px; }

.item {
  width: 215px; 
  position: static !important; 
  display: inline-block; 
  margin-bottom: 5px; }

y parece funcionar en este violín: http://jsfiddle.net/fiddlerjason/58qm3/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top