0

FIDDLE

I have a div that is centered using foundation. Inside that div, I have 215 x 215 divs that have background images of the work I've done.

I've gotten packery to work just fine. My issue is that I want to center these divs inside their container. But I never know how many divs will be on a single row, so I can't just give them padding because it'll mess up if the image i give the padding to goes to a new row.

How can I fix this?

Thanks!

Here is my 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; }
onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • For the whole jsfiddle: http://jsfiddle.net/nbPp8/88/ – Edward Aug 01 '14 at 17:15
  • 1
    Duplicate ? http://stackoverflow.com/a/18412681/2454790 – BENARD Patrick Aug 04 '14 at 12:06
  • Can you show us a wireframe of your expected result? – Samy S.Rathore Aug 04 '14 at 12:35
  • Those examples you gave were a good start but im not sure thats what I'm after. Those examples have fixed widths on the images inside it. Because of that they resize the images. I dont want that. If there is only 1 div in a row or 4 I want them to center in their container. Im not sure how to do this since the number of DIVS can change. – onTheInternet Aug 04 '14 at 14:17
  • @samy Im not sure what you mean. The issue is that the users screen size will determine how many DIVS are in the row. So I can;t really show you an expected result since the expected result can change so much. – onTheInternet Aug 04 '14 at 14:18

1 Answers1

0

It sounds like you want the divs to flow like center-aligned text. I updated your styles to do that:

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

And it seems to work in this fiddle: http://jsfiddle.net/fiddlerjason/58Qm3/

stackingjasoncooper
  • 623
  • 5
  • 13