使用 flexbox,子项的宽度不一时,无论我们使用 justify-content 的什么配置(space-between, space-around, 等),都无法使中间项真正居中。
要让中间项真正居中,需要对 HTML 结构做一些调整,具体如下:
#container {
display: flex;
}
.flex {
flex: 1;
}
<div id="container">
<div class="left flex">
<div>Left Side</div>
</div>
<div class="center flex">
<div>I want this centered</div>
</div>
<div class="right flex">
<div>Right Side (Extra text for extra length)</div>
</div>
</div>
原文链接如下,我对 css 代码进行了简化:https://stackoverflow.com/a/37891978/3054511