StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCenter align a collection of inline-block elements without centering each element
text
Body
copied!<p>I have a complex hierarchy structure in my code that can't really be changed. It is a collection of inline-block divs that contain images, inside of an outer div. Something like this:</p> <pre><code><div>  <div><img/></div> <div><img/></div> <div><img/></div> <div><img/></div>  </div> </code></pre> <p>I need these images to fill the screen based on the users browser window. I also need the images themselves to be left-aligned - so if the browser can fit 5 images per row, and the last row has only 1 image, that image needs to be all the way to the left, not centered. However, I need the entire group to be center aligned, so we don't have a huge white margin on the right side.</p> <p>I have tried adding another div in the hierarchy, something like this:</p> <pre><code><div> <div> <div><img/></div> <div><img/></div> <div><img/></div> <div><img/></div>  </div> </div> </code></pre> <p>This does not work, as the middle div ends up being at full width, despite being inline-block. An example can be found here: <a href="http://jsfiddle.net/cwmRw/" rel="nofollow">http://jsfiddle.net/cwmRw/</a></p> <p>Any ideas on how I can do this? Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload