这个问题已经在这里有了答案: > Center and right align flexbox elements 4个
> Keep the middle item centered when side items have different widths 4个
结果是我想要什么:
我在显示的容器中有三个元素:flex我想让左边的项目与左边对齐,而让右边的项目与右边对齐.中心项目在中心对齐.
间距不是解决办法.这不是我要找的解决方案.这是因为元素的宽度不同.即使宽度不同,我仍然希望中间元素居中.
这可以用包装纸固定.然后放一个flex:1在包装器上,然后在这些包装器中,使元素本身.同样,这不是我要寻找的解决方案.我无法使用包装器.
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
> Keep the middle item centered when side items have different widths
另一种方法涉及CSS绝对定位:
.parentContainer {
display: flex;
justify-content: space-between;
position: relative;
}
.middle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* non-essential decorative styles */
.parentContainer > * { background: orange; text-align: center; padding: 5px; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
P > span:first-child { font-size: 1.5em; }
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
<p>
<span>↑</span><br>
<span>true center</span>
</p>
以下帖子中介绍了此方法:
> Methods for Aligning Flex Items along the Main Axis(请参见框#71)
> Element will not stay centered,especially when re-sizing screen
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。