CSS：使用中心元素作为参考将项目与中心对齐[重复]答案

【问题标题】：CSS: Aligning items to the center by using the center element as a reference [duplicate]CSS：使用中心元素作为参考将项目与中心对齐[重复]
【发布时间】：2020-02-28 01:04:18
【问题描述】：

我正在创建一个标题，我希望中心徽标将所有其他元素定位到它的左侧和右侧。我希望中心标志始终保持在标题的正中心。

当标题中的某些元素没有其他元素那么宽时，问题就出现了，所以我不能使用justify-content: center，因为这会将所有元素完全对齐标题的中心，但是中心标题会得到向左或向右推得太远。

下面我美丽的 MS 画展示了我想要的东西。请注意红色 div 边框中的深蓝色元素之间的空间如何在左侧或右侧相同。

【问题讨论】：

“你不能”怎么样？你必须依赖JS。这违反了任何 CSS 规则
是的.....我认为这可能是不幸的情况。（这就是为什么我们需要一个自我证明的原因！！stackoverflow.com/questions/32551291/…）
如果您粘贴到您的 html 中，我们可以帮助您编写一些 JS 来完成这项工作...如果您需要帮助
嗯嗯。如果我找到妥协，我不会失眠。如果我最终真的想要这种效果，我会先自己尝试一下。不过还是谢谢！你们太棒了。
你必须欺骗 CSS，通过将中心绝对位置设为 50%，并通过在中间使用边距制作一个洞/空间来欺骗 flexbox。发布您的 HTML，我们最终会提供帮助

标签： html css flexbox

【解决方案1】：

我不知道为什么有人会认为这是不可能的 - Flexbox 非常适合这种类型的东西。让我知道这是否是你想要的......

解释一下 - 我在 Flexbox 行中创建了三个容器，其中项目在中间对齐。中间容器已关闭 flex，因此它位于中间的适当宽度。左右容器是灵活的，并且可以增长以填充其余空间，从而形成对称。然后您可以将左侧容器中的项目向右对齐。

.f-row {
  display: flex;
  flex: 1 1 0;
  border: 1px black solid;
}

.f-row.no-flex {
  flex: none;
}

.f-row.center {
  align-items: center;
}

.f-row.right {
  justify-content: flex-end;
}

.box {
  height: 25px;
  width: 50px;
}

.blue {
  background: blue;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}
.pink {
  background: pink;
}
.purple {
  background: purple;
}

<div class="f-row center">
  <div class="f-row right">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
  </div>
  <div class="f-row no-flex">
    <h1>LOGO</h1>
  </div>
  <div class="f-row">
    <div class="box pink"></div>
    <div class="box purple"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

我希望这是您正在寻找的答案：

创建 3 个 div，1 个用于徽标（我们将其命名为“徽标容器”），另外两个用于包含所有额外元素（我们将其命名为“特殊 div”）；
使用display: flex、align-items: center 和justify-content: center 对齐标题内的所有内容；
然后，再次使用相同的属性来对齐两个特殊 div 内的额外元素；
将徽标容器的宽度设置为您希望的任何值，只需确保使用 min-width；
将特殊容器的宽度设置为width: calc(100vw - ???px);，其中???是徽标容器的宽度；
在特殊容器中放置您想要的额外元素。

这里的例子： https://codepen.io/maxym11/pen/PooEzXv

【讨论】：