小编Ian*_*rke的帖子

我认为这很简单,但事实证明这有点头疼.当用户调整浏览器大小并导致其中一个(或多个)换行到下一行时,我正试图让图像网格重新居中.

我试过给网格包装器显示:inline-block; 它的父级值为text-align:center; 但是当它们换行到新行时,这并不会使元素重新居中.帮助赞赏.

有关我正在尝试查看图片的视频,请访问http://ianclarke.ca/div-reflow.png.

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;
}