html-如何在flex行中居中？

这个问题已经在这里有了答案： > 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>

最佳答案

实现这种布局的主要方法(因为它既干净又有效)是在项目上使用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 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>&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相关文章