问题
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; }
回答1:
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/
来源:https://stackoverflow.com/questions/25085265/center-multiple-divs-in-parent-div-while-using-packery-js