Center align a collection of inline-block elements without centering each element - html

Question

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:
<div> <!-- text-align: center -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<!-- ... -->
</div>
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.
I have tried adding another div in the hierarchy, something like this:
<div><!-- text-align: center -->
<div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<div><img/></div><!-- display: inline-block -->
<!-- ... -->
</div>
</div>
This does not work, as the middle div ends up being at full width, despite being inline-block. An example can be found here: http://jsfiddle.net/cwmRw/
Any ideas on how I can do this? Thanks!

Answer 1

You can do this using CSS3 Media Queries by setting the width of the div based on different resolution bounding values. I've copied the css here, in case jsfiddle doesn't keep it around forever.
.img-block{
max-width: 160px;
max-height: 160px;
}
.div-block{
display: inline-block;
}
.img-container{
margin-left: auto;
margin-right: auto;
}
#media all and (min-width:984px){
.img-container{
width: 985px;
}
}
#media all and (min-width:820px) and (max-width: 984px){
.img-container{
width: 820px;
}
}
#media all and (min-width:656px) and (max-width:820px){
.img-container{
width: 656px;
}
}
#media all and (min-width:492px) and (max-width:656px){
.img-container{
width: 492px;
}
}
#media all and (min-width:328px) and (max-width:492px){
.img-container{
width: 328px;
}
}
#media all and (min-width:164px) and (max-width:328px){
.img-container{
width: 164px;
}
}
Here's a modified version of the original code http://jsfiddle.net/hxHuV/9/

Answer 2

Here is a working solution if you are allowed to use jQuery:
http://jsfiddle.net/cwmRw/6/
It dynamically calculates the width of img-sub-container and also re-calculates it if the window size changes.
For a pure CSS solution, you need to know the width of img-sub-container (pixels, percentage...).
Unlike height, the width expands to left and right as much as possible in block level elements.
If you make img-sub-container an inline element, let's say by display:inline-block;, you still need width to be set in order for margin: 0px auto; to work and center it.
Since you don't know how much width you will need, you have to dynamically calculate and set it.

Answer 3

If you know the width of your images and the number of images per row, then you can set the width of your container and center it horizontally with margin: 0 auto like in fiddle while floating the container of your images to avoid the whitespace (4px gap) between each image due to inline-block. You don't need the .sub container anymore but if you remove it you then need a clearfix on your container element because it only contains floats and have no other elements in the flow: updated fiddle
Or without floats, you need to remove the whitespace, by example by writing </div><div> (better remove whitespace in HTML code then trying to negate its effect in CSS, it's far more robust)
Or you can center with text-align the container and set the width of the .sub like in this other fiddle