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

查看：21
本文介绍了包裹上的 CSS 重新居中元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我试过给 grid-wrapper display:inline-block;它的父级值为 text-align: center;但这不会在元素换行时重新居中.感谢帮助.

要了解我要实现的目标，请查看
(来源:ianclarke.ca)
.

HTML:

<div class="child-wrapper"><!-- Worpress 循环加载许多缩略图--><?php if(have_posts()) : ?><?php while(have_posts()) : the_post();?><div class="project-thumbnail"><?php the_post_thumbnail('缩略图');?>
<?php endwhile;?>

CSS:

.parent-wrapper{宽度:100%；文本对齐:居中；}.child-wrapper{显示:内联块；}.project-缩略图{向左飘浮;边框:2px纯黑色；最小宽度:269px；最大宽度:269px；}

解决方案

这是我能想到的仅使用 CSS 的最佳解决方案，神奇的部分是 @media 查询.显然，您必须进行数学计算才能适合您的情况.

JsFiddle 演示

body {边距:0；}.父包装{保证金:自动；宽度:500px；填充:5px 0;字体大小:0；}.child-wrapper {显示:内联块；宽度:100px；字体大小:16px；}.child-wrapper img {最大宽度:100%；高度:自动；填充:5px；垂直对齐:顶部；box-sizing: 边框框；}@media 屏幕和(最大宽度:499px){.parent-wrapper { 宽度:400px;}}@media 屏幕和(最大宽度:399px){.parent-wrapper { 宽度:300px;}}@media 屏幕和(最大宽度:299px){.parent-wrapper { 宽度:200px;}}@media 屏幕和(最大宽度:199px){.parent-wrapper { 宽度:100px;}}

<div class="child-wrapper"><img src="//dummyimage.com/100"/>
<div class="child-wrapper"><img src="//dummyimage.com/100"/>

<div class="child-wrapper"><img src="//dummyimage.com/100"/>

<div class="child-wrapper"><img src="//dummyimage.com/100"/>

<div class="child-wrapper"><img src="//dummyimage.com/100"/>

<div class="child-wrapper"><img src="//dummyimage.com/100"/>

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.

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

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆