Question

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

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

了解我正在努力实现的目标picture here 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;
}

Answer 1

我发现了一个非常相似的问题，有两个功能性答案。一个使用JS，另一个使用占位符元素。两者都不是很漂亮，但两者似乎都解决了内联块空白包装问题。

Shrink-wrap and center a container for inline-block elements

Answer 2

这是我只能用CSS思考的最佳解决方案，神奇的部分是@media查询。显然你必须做数学计算以适应你的情况。

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 3

你试过了吗？

.child-wrapper{margin:0 auto;}

所以它保持中心？它通常有效。

Answer 4

请将float:left添加到课程.project-thumbnail，以获取针对不同浏览器/屏幕/设备尺寸的浏览器断点。

.project-thumbnail{
    float:left;
    border:2px solid black;
    min-width: 269px;
    max-width: 269px;
}

将margin: 0, auto;添加到下一个班级。

.child-wrapper
{
    margin: 0, auto;
}

通过PHP代码，我了解到DIV类名为.project-thumbnail的{{1}}会在WHILE循环迭代中重复出现。

包裹

4 个答案: