V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
edis0n0
V2EX  ›  程序员

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

  •  
  •   edis0n0 · 2023-01-24 20:22:46 +08:00 · 2842 次点击
    这是一个创建于 667 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码:

    
    <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

    23 条回复    2023-01-25 01:11:15 +08:00
    codehz
        1
    codehz  
       2023-01-24 20:33:58 +08:00
    一眼 display: grid
    horseInBlack
        2
    horseInBlack  
       2023-01-24 20:35:12 +08:00
    给 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>
    Posuker
        3
    Posuker  
       2023-01-24 20:38:21 +08:00
    有点懵,简单写一下。

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

    这样出来的效果,大概符合预期
    edis0n0
        4
    edis0n0  
    OP
       2023-01-24 20:40:50 +08:00
    @horseInBlack @Posuker 但我这情况 list 是不固定宽度,填满自动换行的,你们的方案都要固定列表宽度
    edis0n0
        5
    edis0n0  
    OP
       2023-01-24 20:43:35 +08:00
    @codehz #1 在哪里用 grid 呢,内外 div 好像都不行
    edis0n0
        6
    edis0n0  
    OP
       2023-01-24 20:45:16 +08:00
    @horseInBlack #2 试过 div ,填满自动换行还是会导致宽度变成 100%而不是实际宽度,无法居中
    edis0n0
        7
    edis0n0  
    OP
       2023-01-24 20:45:59 +08:00
    @horseInBlack #6 试过 div 》 试过 flex
    wenzhoou
        8
    wenzhoou  
       2023-01-24 20:49:03 +08:00
    https://jsfiddle.net/a2pz3d6r/

    <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;
    }
    buxudashi
        9
    buxudashi  
       2023-01-24 20:49:10 +08:00
    你都固定宽度了。不能 float:left 吗?
    edis0n0
        10
    edis0n0  
    OP
       2023-01-24 20:51:29 +08:00
    @wenzhoou #8 你这最后一行也居中了,我需要最后一行居左,列表居中
    @buxudashi #9 明显是 ***不能*** 固定列表宽度
    wenzhoou
        11
    wenzhoou  
       2023-01-24 20:52:47 +08:00
    没看清题
    codehz
        12
    codehz  
       2023-01-24 20:54:40 +08:00
    @edis0n0 只要一层就可以了
    grid
    设置好列的模式
    最后用 justify-content
    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
    codehz
        13
    codehz  
       2023-01-24 21:06:52 +08:00
    设置列的模式,就用 grid-template-columns: repeat(auto-fit, 100px);
    100 可以换成需要的宽度
    甚至还能配合 minmax 做列的宽度自适应
    中间的 gap 就直接用 gap 属性
    wenzhoou
        14
    wenzhoou  
       2023-01-24 21:34:24 +08:00   ❤️ 1
    是不是只能动用 js 大法了? https://jsfiddle.net/Ln9r67st/
    你可以试试。
    Posuker
        15
    Posuker  
       2023-01-24 22:06:35 +08:00
    @edis0n0 宽度随意哈,并不需要定宽,flex-wrap: wrap 了,超出宽度就会自动换行了。
    crystom
        16
    crystom  
       2023-01-24 22:23:09 +08:00
    设置外层的宽度
    otakustay
        17
    otakustay  
       2023-01-24 22:34:52 +08:00
    https://codesandbox.io/s/responsive-grid-5q3s2
    类似这个么?只要把外面的容器用 flex 居下中就行?
    qwq11
        18
    qwq11  
       2023-01-24 23:00:58 +08:00
    #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>
    edis0n0
        19
    edis0n0  
    OP
       2023-01-24 23:26:43 +08:00
    目前能工作的只有 14 楼 @wenzhoou 的代码,但用 js 实现这个实在不优雅,还在尝试 12 楼的

    @qwq11 #18 你这个没有居中,只是左右有 5rem margin
    @crystom #16 外层宽度***不固定***!!!
    CYTMWIA
        20
    CYTMWIA  
       2023-01-25 00:36:13 +08:00   ❤️ 1
    [![pStuT2Q.png]( https://s1.ax1x.com/2023/01/25/pStuT2Q.png)]( https://imgse.com/i/pStuT2Q)
    可以试试`flex-wrap`参数 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap
    可以做到堆叠元素(放不下就换行),但对于 方块集合 会在右边缘有空白
    添加`justify-content: center;`到列表容器可以让方块堆叠后居中(但最后一行也居中了)
    zhengjian
        21
    zhengjian  
       2023-01-25 00:48:10 +08:00   ❤️ 2
    是这个意思吗?







    使用 gird 可以实现

    c0t
        22
    c0t  
       2023-01-25 01:02:51 +08:00 via iPhone
    感叹你的活好杂,上次还在问 shader 呢…
    edis0n0
        23
    edis0n0  
    OP
       2023-01-25 01:11:15 +08:00
    @zhengjian #21 对,就是这样的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1143 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:32 · PVG 02:32 · LAX 10:32 · JFK 13:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.