CSS重新居中元素的包装 [英] CSS Re-Centering elements on wrap

问题描述

我以为这将很简单，但它的证明是有点头痛。我试图获得一个网格的图像重新集中，当用户调整浏览器的大小，并导致一个（或多个）包装到下一行。

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.

我试过给grid-wrapper显示：inline-block;并且它的父值为text-align：center;但是当元素换行到新行时，它不会重新定位元素。帮助赞赏。

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 .

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查询。显然你必须做数学以适应你的情况。

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>

这篇关于CSS重新居中元素的包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！