如何将中间项目居中在 flex 行中？ [复制]

Posted 2023-03-05

【中文标题】如何将中间项目居中在 flex 行中？ [复制]

【英文标题】：How to center the middle item in a flex row? [duplicate]

【发布时间】：2019-06-17 12:52:53

【问题描述】：

我想要的结果：

我在 display: flex 的容器中有三个元素，我希望左侧项目与左侧对齐，右侧项目与右侧对齐。中心项目在中心对齐。

space-between 不是解决方法。这不是我正在寻找的解决方案。这是因为元素的宽度不同。即使宽度不同，我仍然希望中间元素居中。

这可以通过包装来解决。然后在包装器上放一个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>

【问题讨论】：

Apols，我在第一次复飞时出现了一个小错误。 flex:1 正确对齐了内部 div，但在这些 div 内我们仍然需要对齐文本。

【参考方案1】：

实现这种布局的主要方法——因为它干净且有效——是在项目上使用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

【参考方案2】：

我认为您可以使用不同的方法。这是我的建议。

.parentContainer 
  display: table;
  width: 100%;
  background: lightblue;
  border-collapse: collapse;


.parentContainer > div 
   display: table-cell;
   width: 33%;


.parentContainer > div:nth-child(1) 
  text-align: left;


.parentContainer > div:nth-child(2) 
  text-align: center;


.parentContainer > div:nth-child(3) 
  text-align: right;

<div class="parentContainer">
 <div>small</div>
 <div>medium element here</div>
 <div>longer element is here too</div>
</div>