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

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;   // make element grow

flex-shrink:0; // prevent element from shrinking (preference really)

flex-basis:0;  // ignore content width

/* Just for illustrating, To be removed */

body * {

  border: 1px solid;

  padding: 10px;

}

[center] {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 1.5rem;

}

/* ============ */

.flex {

  display: flex;

}

.page-container {

  margin: 1.5rem;

  max-height: 9rem;

  overflow: hidden;

  align-items: center;

}

.team-name {

  flex: 1 0 0;

  align-items: center;

  justify-content: flex-end;

}

.team-logo {

  max-height: 6rem;

  max-width: 7rem;

  overflow: hidden;

  margin: 0 10px;

}

.vs {

  margin: 0 10px;

}

.team-name~.team-name {

  justify-content: flex-start;

}

True center example

<div center="">

  <div>VS</div>

</div>

<div class="flex page-container">

  <div class="flex team-name">

    THIS TEAM NAME IS LONG

    <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg">

  </div>

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

  <div class="flex team-name">

    <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg"> SHORT NAME

  </div>

</div>

Answer 2

尝试

.page-container {

  justify-content: space-between;

}

或者

.page-container {

  justify-content: space-evenly;

}

如果您不希望团队名称与边缘对齐