It took an untold number of fruitless Google searches and a couple of hours of trial and error to get this to work. I think part of the problem may have been that I simply didn’t really know how to describe what I’m trying to do in a way that would yield good search results. And so, I hope now that I have a solution, sharing it here might help someone else.
The situation: I have a web page that contains a gallery of square images. The page is responsive but the sizes of the images are fixed. I want the page to automatically show as many images across as will fit in the layout on any particular screen, creating anywhere from one to five columns as needed. And, it needs to stay centered.
I got all of this going pretty easily… all except the “it has to stay centered” part. I was able to get it to work if there was only a single line of images, but as soon as they wrapped to multiple lines, the container element went to a full width and the images became left-aligned. It took considerable effort to discover a solution, although that solution itself is embarrassingly simple. I was hung up on a couple of possible approaches that got me nowhere, which probably contributed to the problems I had finding the right way to do it.
So… here we go. We’ll start with an unordered list:
<ul class="gallery">
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
<li><img src="image.jpg" alt="" /></li>
</ul>
And here is that embarrassingly simple CSS:
ul.gallery {
text-align: center;
}ul.gallery li {
display: inline-block;
}
OK, that’s not really all of the CSS. Your li tag needs height and width properties, and you may want to give it margin as well. But those values are going to be specific to your project.