gpt4 book ai didi

html - 在 2 个不同宽度的 flex 元素之间水平居中 flex 元素

转载 作者:太空狗 更新时间:2023-10-29 13:08:44 27 4
gpt4 key购买 nike

<分区>

假设我用 flexbox 水平显示了 3 个 div:

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

我希望居中的 div 与父元素的中间对齐。我怎样才能做到这一点? justify-content 将基于所有宽度的总和将所有 3 个 div 居中,并将 align-self: center 应用到中间的 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com