首页 > V2EX > V2EX-请 css 大佬帮忙看下这个居中难题,折腾了 3 个小时还没解决
2023
01-24

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

edis0n0:

代码:


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

预期效果是 div 列表居中,但列表内容不居中(像例图中的效果,最后一行在左边)
V2EX-请 css 大佬帮忙看下这个居中难题,折腾了 3 个小时还没解决 - 第1张  | 牛C网(NiuL.Net)

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

from V2EX-最新主题 https://ift.tt/iQ0qtXo
福利APP推荐:https://niucnet.notion.site
广告投放:https://t.me/cnxalex
牛C网:https://j1o.net
牛C网导航:https://niuc2.com
福利APP合集:https://j1o.net/share/1678.html
V2EX-请 css 大佬帮忙看下这个居中难题,折腾了 3 个小时还没解决 - 第2张  | 牛C网(NiuL.Net)

最后编辑:
作者:分享菌
这个作者貌似有点懒,什么都没有留下。

留下一个回复