我以为这很简单，但事实证明有点令人头疼。当用户调整浏览器大小并导致其中一个（或多个）换行到下一行时，我试图让图像网格重新居中。
我尝试过给网格包装器 display:inline-block;它的父级值为 text-align: center;但这不会在元素换行时重新居中。帮助表示赞赏。
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;
}
这是我能想到的仅使用 CSS 的最佳解决方案，神奇的部分是 @media 查询。显然，您必须进行数学计算以适合您的情况。
JsFiddle 演示
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>