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

讨论未结 26 36

edis0n0 会员 2023年1月24日 12:26 发表

<p>代码：</p> <pre><code> <html> <body> <div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div> </div> </body> </html> </code></pre> <p>预期效果是 div 列表居中，但列表内容不居中（像例图中的效果，最后一行在左边） <img alt="" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://i.imgur.com/bWAJbmv.png"></p> <p>如果直接 text-align: center ，最后一行也会被居中如果再套一层 div 再 text-align: center ，因为一行显示不下的情况下内层 div 宽度是 100%，所以外层的 center 根本没生效，尝试了一堆 flex width:fit-content 之类的样式全都不能 trim 内层 div</p>

相关标签：灌水交流
注意：本文归作者所有，未经作者允许，不得转载

26个回复

codehz 会员

2023年1月24日 12:56

一眼 display: grid

0 0

horseInBlack 会员

2023年1月24日 12:56

给 list 加一个 margin:0 auto;就行了现代 CSS 不会整就直接 flex 就行了，flex 该怎么对齐就怎么对齐，你这种情况往外面套容器 div ，容器里面继续 flex 也能重新设置对齐方式 <html> <body> <div class="list"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> <style lang=""> body { background-color: skyblue; } .list { width: 500px; margin: 0 auto; } .box { display: inline-block; background: #111; width: 100px; height: 100px; } </style>

0 0

Posuker 会员

2023年1月24日 12:56

有点懵，简单写一下。 <html> .... <body> <div style="margin: auto; display: flex; flex-wrap: wrap; width: 1200px"> <div style="width: 200px; height:200px"></div> <div style="width: 200px; height:200px"></div> <div style="width: 200px; height:200px"></div> </div> </body> </html> 这样出来的效果，大概符合预期

0 0

edis0n0 会员 (楼主)

2023年1月24日 12:56

@ 但我这情况 list 是不固定宽度，填满自动换行的，你们的方案都要固定列表宽度

0 0

edis0n0 会员 (楼主)

2023年1月24日 12:56

#1 在哪里用 grid 呢，内外 div 好像都不行

0 0

edis0n0 会员 (楼主)

2023年1月24日 12:56

#2 试过 div ，填满自动换行还是会导致宽度变成 100%而不是实际宽度，无法居中

0 0

edis0n0 会员 (楼主)

2023年1月24日 12:56

#6 试过 div 》试过 flex

0 0

wenzhoou 会员

2023年1月24日 12:56

<div class="outer"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> .outer { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } .inner { display: inline-block; background: #111; width: 200px; height: 100px; margin: 10px; }

0 0

buxudashi 会员

2023年1月24日 12:56

你都固定宽度了。不能 float:left 吗？

0 0

edis0n0 会员 (楼主)

2023年1月24日 12:56

#8 你这最后一行也居中了，我需要最后一行居左，列表居中 @ #9 明显是 ***不能*** 固定列表宽度

0 0

wenzhoou 会员

2023年1月24日 12:56

没看清题

0 0

codehz 会员

2023年1月24日 12:56

只要一层就可以了 grid 设置好列的模式最后用 justify-content

0 0

wenzhoou 会员

2023年1月24日 13:28

<div class="outer"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> .outer { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } .inner { display: inline-block; background: #111; width: 200px; height: 100px; margin: 10px; }

0 0

codehz 会员

2023年1月24日 13:28

只要一层就可以了 grid 设置好列的模式最后用 justify-content

0 0

codehz 会员

2023年1月24日 13:28

设置列的模式，就用 grid-template-columns: repeat(auto-fit, 100px); 100 可以换成需要的宽度甚至还能配合 minmax 做列的宽度自适应中间的 gap 就直接用 gap 属性

0 0

wenzhoou 会员

2023年1月24日 13:57

是不是只能动用 js 大法了？你可以试试。

0 0

Posuker 会员

2023年1月24日 14:26

宽度随意哈，并不需要定宽，flex-wrap: wrap 了，超出宽度就会自动换行了。

0 0

crystom 会员

2023年1月24日 14:57

设置外层的宽度

0 0

otakustay 会员

2023年1月24日 14:57

类似这个么？只要把外面的容器用 flex 居下中就行？

0 0

qwq11 会员

2023年1月24日 15:28

#2 就是最简单的，不过好像 margin 写反了？ <html> <head> <style> #container { margin: auto 5rem; } #container > div { background: #111; width: 200px; height: 200px; display: inline-block; } </style> </head> <body> <div id="container"> <div></div> <div></div> <div style="width: 600px"></div> <div></div> <div></div> <div style="width: 800px;"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>

0 0

edis0n0 会员 (楼主)

2023年1月24日 15:59

目前能工作的只有 14 楼的代码，但用 js 实现这个实在不优雅，还在尝试 12 楼的 @ #18 你这个没有居中，只是左右有 5rem margin @ #16 外层宽度***不固定***！！！

0 0

CYTMWIA 会员

2023年1月24日 16:56

[![pStuT2Q.png]( )]( ) 可以试试`flex-wrap`参数可以做到堆叠元素（放不下就换行），但对于方块集合会在右边缘有空白添加`justify-content: center;`到列表容器可以让方块堆叠后居中（但最后一行也居中了）

0 0

zhengjian 会员

2023年1月24日 16:56

是这个意思吗？使用 gird 可以实现

0 0

zhengjian 会员

2023年1月24日 17:27

是这个意思吗？使用 gird 可以实现

0 0

c0t 会员

2023年1月24日 17:27

感叹你的活好杂，上次还在问 shader 呢…

0 0

edis0n0 会员 (楼主)

2023年1月24日 17:27

#21 对，就是这样的

0 0

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

友情链接