html – 水平中心flex项目在2个不同宽度的flex项目之间

发布时间：2020-12-14 18:51:06 所属栏目：资源来源：网络整理

说我有3个div与flexbox水平显示：

|     |-div1-| |-center-div-| |-wider-div-|     |

我想让中心的div与父母的中间对齐.我该如何做到这一点？对齐内容将以所有宽度的总和为中心,并将对齐自身：中心应用到中间的div将不起作用,因为对齐属性操纵另一个轴上的定位.

有没有一个敏捷的CSS解决方案,还是应该诉诸于jQuery？

ul {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: purple;
}
li {
    background-color: red;
    border: 5px solid blue;
    list-style: none;
}

<ul>
    <li><a href = "#">short</a></li>
    <li><a href = "#">want center</a></li>
    <li><a href = "#">loooooooooooooooooong</a></li>
</ul>

这个问题的例证：
https://jsfiddle.net/7w8mp8Lj/2/

解决方法

您可以设置第一个和最后一个li来生成flex：1,并将其设置为内联块和文本对齐1/2/3 li作为右/中/左.

jsfiddle

ul {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: purple;
    list-style: none;
    padding: 0;
}
li:nth-child(1) {
    text-align: right;
    flex: 1;
}
li:nth-child(2) {
    text-align: center;
}
li:nth-child(3) {
    text-align: left;
    flex: 1;
}
li a {
    display: inline-block;
    background-color: red;
    border: 5px solid blue;
}

<ul>
    <li><a href="#">short</a></li>
    <li><a href="#">want center</a></li>
    <li><a href="#">loooooooooooooooooong</a></li>
</ul>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!