html-如何在flex行中居中？

概述这个问题已经在这里有了答案：            >            Center and right align flexbox elements                                    4个>            Keep the middle item centered when side items

这个问题已经在这里有了答案：            >            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 > <div >small</div> <div >medium element here</div> <div >longer element is here too</div></div>

最佳答案实现这种布局的主要方法(因为它既干净又有效)是在项目上使用flex：1.该方法在以下文章中进行了解释,但在该问题中也被排除.

> 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 >  <div >small</div>  <div >medium element here</div>  <div >longer element is here too</div></div><p>  <span>&uarr;</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 总结

以上是内存溢出为你收集整理的html-如何在flex行中居中？ 全部内容，希望文章能够帮你解决html-如何在flex行中居中？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。