Yoo趣儿

Yoo趣儿 › Geek › 程序员 › 请 css 大佬帮忙看下这个居中难题，折腾了 3 个小时还没 ...

请 css 大佬帮忙看下这个居中难题，折腾了 3 个小时还没解决

查看 520|回复 23
作者：edis0n0   
代码：
   
        
            
            
            
            
            
            
            
            
            
            
        
   
预期效果是 div 列表居中，但列表内容不居中（像例图中的效果，最后一行在左边）

如果直接 text-align: center ，最后一行也会被居中
如果再套一层 div 再 text-align: center ，因为一行显示不下的情况下内层 div 宽度是 100%，所以外层的 center 根本没生效，尝试了一堆 flex width:fit-content 之类的样式全都不能 trim 内层 div

div, width, height, background

相关帖子

codehz   
一眼 display: grid
horseInBlack   
给 list 加一个 margin:0 auto;就行了
现代 CSS 不会整就直接 flex 就行了，flex 该怎么对齐就怎么对齐，你这种情况往外面套容器 div ，容器里面继续 flex 也能重新设置对齐方式














body {
background-color: skyblue;
}
.list {
width: 500px;
margin: 0 auto;
}
.box {
display: inline-block;
background: #111;
width: 100px;
height: 100px;
}
Posuker   
有点懵，简单写一下。
....







这样出来的效果，大概符合预期
edis0n0
OP
  
@horseInBlack @Posuker 但我这情况 list 是不固定宽度，填满自动换行的，你们的方案都要固定列表宽度
edis0n0
OP
  
@codehz #1 在哪里用 grid 呢，内外 div 好像都不行
edis0n0
OP
  
@horseInBlack #2 试过 div ，填满自动换行还是会导致宽度变成 100%而不是实际宽度，无法居中
edis0n0
OP
  
@horseInBlack #6 试过 div 》 试过 flex
wenzhoou   
https://jsfiddle.net/a2pz3d6r/
  
  
  
  
  
  
  
  
  
  
  
.outer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.inner {
display: inline-block;
background: #111;
width: 200px;
height: 100px;
margin: 10px;
}
buxudashi   
你都固定宽度了。不能 float:left 吗？
下一页 »
123下一页
返回列表
您需要登录后才可以回帖 登录 | 立即注册

AD1

热门主题

热门板块

问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

公告

标签|小黑屋|Yoo趣儿

GMT+8, 2024-9-20 06:09 , Processed in 0.012024 second(s), 10 queries , Gzip On, MemCached On.

Powered by Discuz! X3.2

The happiest thing in the world is to strive for an ideal.

返回顶部