本文介绍了包裹上的 CSS 重新居中元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我认为这很简单,但事实证明这有点头疼.当用户调整浏览器大小并导致其中一个(或多个)换行到下一行时,我试图让图像网格重新居中.
我试过给 grid-wrapper display:inline-block;它的父级值为 text-align: center;但这不会在元素换行时重新居中.感谢帮助.
要了解我要实现的目标,请查看
.
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"/>