7

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

 1 year ago
source link: https://www.v2ex.com/t/910482
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

V2EX  ›  程序员

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

  edis0n0 · 1 小时 55 分钟前 · 444 次点击 

<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 列表居中，但列表内容不居中（像例图中的效果，最后一行在左边）

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK