CSS Re-Centering elements on wrap - css

Question

I thought this would be simple but it's proving to be a bit of a headache. I'm trying to get a grid of images to re-center when the user resizes the browser and causes one (or more) of them to wrap onto the next line.
I've tried giving the grid-wrapper display:inline-block; and it's parent a value of text-align: center; but this doesn't re-center the elements when they wrap to a new line. Help appreciated.
For a visual of what I'm trying to achieve view
(source: ianclarke.ca)
.
HTML:
<div class="parent-wrapper">
<div class="child-wrapper">
<!-- Worpress loop to load many thumnails -->
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="project-thumbnail">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<?php endwhile; ?>
</div>
</div>
CSS:
.parent-wrapper
{
width:100%;
text-align: center;
}
.child-wrapper
{
display:inline-block;
}
.project-thumbnail{
float:left;
border:2px solid black;
min-width: 269px;
max-width: 269px;
}

Answer 1

This is the best solution I can think of with CSS only, the magic part is the #media queries. Obviously you'll have to do the math to fit your case.
JsFiddle Demo
body {
margin: 0;
}
.parent-wrapper {
margin: auto;
width: 500px;
padding: 5px 0;
font-size: 0;
}
.child-wrapper {
display: inline-block;
width: 100px;
font-size: 16px;
}
.child-wrapper img {
max-width: 100%;
height: auto;
padding: 5px;
vertical-align: top;
box-sizing: border-box;
}
#media screen and (max-width: 499px) {
.parent-wrapper { width: 400px; }
}
#media screen and (max-width: 399px) {
.parent-wrapper { width: 300px; }
}
#media screen and (max-width: 299px) {
.parent-wrapper { width: 200px; }
}
#media screen and (max-width: 199px) {
.parent-wrapper { width: 100px; }
}
<div class="parent-wrapper">
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
</div>

Answer 2

I found a very similar question with two functional answers. One uses JS and the other uses placeholder elements. Neither are very pretty, but both appear to work around the inline-block whitespace wrap problem here.
Shrink-wrap and center a container for inline-block elements

Answer 3

Have you tried:
.child-wrapper{margin:0 auto;}
So it stays centered? It usually works.

Answer 4

Please add float:left to class .project-thumbnail for the browser breakpoints specific to different browser / screen/device sizes.
.project-thumbnail{
float:left;
border:2px solid black;
min-width: 269px;
max-width: 269px;
}
Add margin: 0, auto; to following class.
.child-wrapper
{
margin: 0, auto;
}
Going through the PHP code I understood that the DIV with the class name .project-thumbnail gets repeated through WHILE loop iterations.