如何在 Flexbox 框的左边缘居中子文本？答案

【问题标题】：How do I center child text on the left edge of Flexbox boxes?如何在 Flexbox 框的左边缘居中子文本？
【发布时间】：2017-07-15 00:38:30
【问题描述】：

在此示例中，您如何将子文本置于父框的左边缘居中？

目标是在前一个框中看到一半的文本，在自己的框中看到一半，无论文本长度如何。

.boxesContainer {
  display: flex;
}
.text{
/* This needs to be 50% of the text width, not the box. */
/*   transform: translateX(-50%); */ 
}
.box1 {
  background: #D9E4AA; 
  flex-basis: 30%;
  z-index:1;
}
.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index:2;
}
.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index:3;
}
.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index:4;
}
.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index:5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

【问题讨论】：

看看我在这里发布的评论，其中包含一些有用的链接：stackoverflow.com/questions/45104834/…

标签： html css flexbox

【解决方案1】：

对每个文本项使用绝对定位。使用position: relative (detailed explanation) 使每个单独的框（弹性项目）成为包含块。

您需要为容器添加高度，因为设置高度的文本将从文档流中删除。

.boxesContainer {
  display: flex;
  height: 20px;
}

.boxesContainer>  div {
  position: relative;
}

.boxesContainer > div > .text {
  position: absolute;
  transform: translateX(-50%);
}

.box1 {
  background: #D9E4AA;
  flex-basis: 30%;
  z-index: 1;
}

.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index: 2;
}

.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index: 3;
}

.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index: 4;
}

.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index: 5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

【讨论】：

谢谢迈克尔。效果很好，但 vals 的简单性得到了检查。
是的。如果它完成了您需要的工作，这是一个更简单的解决方案。我偏离了inline-block，所以我不必处理基线对齐，这可能会将文本提升到较大容器的垂直中心上方。
是的，这是有道理的。它肯定会成为工具箱的有用工具。再次感谢您的帮助！
实际上，不得不在这个问题上颠倒过来……您的解决方案在实践中效果最好，因为文本不会在其所在的盒子上强制它的大小。标记为解决方案。再次...谢谢！

【解决方案2】：

将文本项设置为 inline-block

.boxesContainer {
  display: flex;
}
.text{
   display: inline-block;
   transform: translateX(-50%); 
}
.box1 {
  background: #D9E4AA; 
  flex-basis: 30%;
  z-index:1;
}
.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index:2;
}
.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index:3;
}
.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index:4;
}
.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index:5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

【讨论】：

美丽。简单的。谢谢！