html - 将一个元素与多个兄弟元素一起居中

Question

我有一个包含一些跨度的 div，宽度可能相等也可能不相等。我知道我可以使用 text-align: center 使 div 中的所有内容居中。但是，我想选择一个特定的跨度，并将其指定为真正的中心，而不是将中心指定为跨度序列的中点。

我必须模拟这种效果的一个想法是:我有我想要的中间元素，其左右有两个容器；左边的是右对齐的，反之亦然。这些容器将包含 div 中的其他内容。如果我能让这两个容器等量地填满剩余空间，这将具有使中间元素居中同时保持左右内容与中心对齐的效果。基本上，这需要将两个容器的宽度设置为 div 中剩余空间的一半。 (我不想改变中间 div 的大小。)这可能只用 CSS 来做吗？

示例:有 4 个跨度，如何将跨度 2 指定为真正的中心？

div {
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
span {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
}
#b {
  /* ??? */
}

<div>
  <span id="a">1</span>
  <span id="b">2</span>
  <span id="c">3</span>
  <span id="d">4</span>
</div>

Answer 1

你可以使用 flexbox。基于this answer ,

.outer-wrapper {
  display: flex;
  padding: 4px;
  border: 1px dotted black;
}
.item {
  margin: 4px;
  text-align: center;
  border: 1px dotted black;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.left.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 50vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">1. Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">2. Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">3. Right</div>
    <div class="item">4. Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>

这将尝试将所需元素居中，但如果一侧不适合，它将被插入以防止重叠。