Html 如何使用CSS将文本居中，使其中一个元素始终位于父元素的中心？

我有一个元素，我想在其中显示两个团队名称，如：Team1和Team2。然而，当一支球队的名字比另一支球队的名字长得多时，vs就会偏离中心

我如何才能实现“对”部分始终保持死点，并让两个元素在两边紧靠着它？所有元素都是文本

例如：

--------Team1-vs.-Team2--------
Team1Longname-vs.-Team2--------
--------Team1-vs.-Team2Longname

---

您可以使用flexbox并分配两个团队名称

flex:1

。然后在左侧给出团队名称

text align:right

.wrapper{
显示器：flex；
}
.wrapper.团队{
弹性：1；
}
.wrapper.vs{
利润率：0.10px；
}
团队：第一个孩子{
文本对齐：右对齐；
}

第一队
vs。
第二小组
第一队
vs。
名字很长的第二队
名字很长的团队1
vs。
第二小组

您可以使用flexbox并分配两个团队名称

flex:1

。然后在左侧给出团队名称

text align:right

.wrapper{
显示器：flex；
}
.wrapper.团队{
弹性：1；
}
.wrapper.vs{
利润率：0.10px；
}
团队：第一个孩子{
文本对齐：右对齐；
}

第一队
vs。
第二小组
第一队
vs。
名字很长的第二队
名字很长的团队1
vs。
第二小组

Hi，请在代码段中创建示例使用

表格（因为这就是原因）并将“Vs”放在中间列Hi，请在代码段中创建示例使用
表格（因为这就是原因）并将“Vs”放在中间列