Html 如何将子文本居中放置在Flexbox框的左边缘？

在本例中，如何将子文本居中放置在父框的左边缘

目标是在上一个框中看到一半文本，在自己的框中看到一半文本，而不管文本长度如何

.boxes容器{
显示器：flex；
}
.文本{
/*这需要是文本宽度的50%，而不是框的50%*/
/*转换：translateX（-50%）；*/
}
.box1{
背景：#D9E4AA；
弹性基准：30%；
z指数：1；
}
.box2{
背景#B8D2EC；
弹性基准：10%；
z指数：2；
}
.box3{
背景#F3D1B0；
弹性基准：20%；
z指数：3；
}
.box4{
背景#D5B2D4；
弹性基准：10%；
z指数：4；
}
.box5{
背景：#F2AFAD；
弹性基准：40%；
z指数：5；
}

1---1
2-----2
3-------3
4---------4
5-----------5

对每个文本项使用绝对定位。使用

位置：relative

（）将每个单独的框（弹性项）作为包含块

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

.boxes容器{
显示器：flex；
高度：20px；
}
.boxesContainer>div{
位置：相对位置；
}
.boxesContainer>div>.text{
位置：绝对位置；
转化：translateX（-50%）；
}
.box1{
背景：#D9E4AA；
弹性基准：30%；
z指数：1；
}
.box2{
背景#B8D2EC；
弹性基准：10%；
z指数：2；
}
.box3{
背景#F3D1B0；
弹性基准：20%；
z指数：3；
}
.box4{
背景#D5B2D4；
弹性基准：10%；
z指数：4；
}
.box5{
背景：#F2AFAD；
弹性基准：40%；
z指数：5；
}

1---1
2-----2
3-------3
4---------4
5-----------5

将文本项设置为内联块

.boxes容器{
显示器：flex；
}
.文本{
显示：内联块；
转化：translateX（-50%）；
}
.box1{
背景：#D9E4AA；
弹性基准：30%；
z指数：1；
}
.box2{
背景#B8D2EC；
弹性基准：10%；
z指数：2；
}
.box3{
背景#F3D1B0；
弹性基准：20%；
z指数：3；
}
.box4{
背景#D5B2D4；
弹性基准：10%；
z指数：4；
}
.box5{
背景：#F2AFAD；
弹性基准：40%；
z指数：5；
}

1---1
2-----2
3-------3
4---------4
5-----------5

看看我在这里发布的一条评论，上面有一些有用的链接：美丽。简单。谢谢谢谢你，迈克尔。工作很好，但是VAL得到了简单性的检查。是的。如果它能完成您需要的工作，那么它是一个更简单的解决方案。我避开了

内联块

，因此我不必处理基线对齐，这可能会将文本提升到更大容器的垂直中心之上。是的，这很有意义。它肯定是工具箱的有用工具。再次感谢你的帮助！事实上，在这件事上我不得不改变方向。。。您的解决方案在实践中效果最佳，因为文本不会强制其所在的框显示其大小。标记为溶液的。再一次谢谢