如何使整个元素围绕子元素居中？

Question

显示“vs”应位于的中心线的图像

我会尽力尽可能清楚地解释我的问题。在这里，我试图使“vs”位于中心线，左右元素在其旁边流动。

我尝试使用弹性盒，但它集中了整个事情，正如您在上面的照片中看到的那样，但不是我想要实现的目标。

谢谢！

这是我尝试过的一个片段：

<div class='flex page-container'>

      <div class='flex team-name'>

        THIS TEAM NAME IS LONG

        <img class='team-logo' src={TEAM_1_LOGO} />

      </div>

      <div class='vs'>VS</div>

      <div class='flex team-name'>

        <img class='team-logo' src={TEAM_2_LOGO} />

        SHORT NAME

      </div>

</div>

.flex {

  display: flex;

}

.page-container {

  align-items: center;

  justify-content: center;

  margin: 1.5rem;

  max-height: 9rem;

  overflow: hidden;

  .team-name {

    align-items: center;

  }

  .team-logo {

    height: 6rem;

    max-width: 7rem;

    margin: 0 5rem;

    overflow: hidden;

  }

  .vs {

    align-self: center;

  }

}

Answer 1

flex-basis:0为了确保元素真正共享可用空间，而不是先计算每个弹性项目的内容，然后分配剩余空间。剩下的只是简单的对齐。flex: 1 0 0;是缩写flex-grow:1;&nbsp; &nbsp;// make element growflex-shrink:0; // prevent element from shrinking (preference really)flex-basis:0;&nbsp; // ignore content width/* Just for illustrating, To be removed */body * {&nbsp; border: 1px solid;&nbsp; padding: 10px;}[center] {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; margin: 1.5rem;}/* ============ */.flex {&nbsp; display: flex;}.page-container {&nbsp; margin: 1.5rem;&nbsp; max-height: 9rem;&nbsp; overflow: hidden;&nbsp; align-items: center;}.team-name {&nbsp; flex: 1 0 0;&nbsp; align-items: center;&nbsp; justify-content: flex-end;}.team-logo {&nbsp; max-height: 6rem;&nbsp; max-width: 7rem;&nbsp; overflow: hidden;&nbsp; margin: 0 10px;}.vs {&nbsp; margin: 0 10px;}.team-name~.team-name {&nbsp; justify-content: flex-start;}True center example<div center="">&nbsp; <div>VS</div></div><div class="flex page-container">&nbsp; <div class="flex team-name">&nbsp; &nbsp; THIS TEAM NAME IS LONG&nbsp; &nbsp; <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg">&nbsp; </div>&nbsp; <div class="vs">VS</div>&nbsp; <div class="flex team-name">&nbsp; &nbsp; <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg"> SHORT NAME&nbsp; </div></div>

Answer 2

尝试.page-container {&nbsp; justify-content: space-between;}或者.page-container {&nbsp; justify-content: space-evenly;}如果您不希望团队名称与边缘对齐