CSS Re-Centering elements on wrap

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

Answer 1

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.

Answer 2

Have you tried:

.child-wrapper{margin:0 auto;}

So it stays centered? It usually works.

Answer 3

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 4

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>