将一个元素与多个兄弟元素居中答案

【问题标题】：Center one element along with multiple siblings将一个元素与多个兄弟元素居中
【发布时间】：2017-05-15 13:05:26
【问题描述】：

我有一个 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>

【问题讨论】：

中间元素居中的奇数（例如 3）个元素有很多答案，但我有兴趣看到偶数个元素（例如 4）的优雅解决方案，其中第二个居中。

标签： html css centering

【解决方案1】：

您可以使用弹性框。基于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>

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

【讨论】：

花了我一分钟来弄清楚动画中发生了什么，但这真的很酷。我认为弹性框是基于空格而不是宽度工作的。这不是这里发生的事情，是吗？
@codebreaker 解释在链接的答案中，我使用三个代表左、中和右的弹性框。左边和右边的最初大小为 0 宽度，然后它们增长以填充剩余空间，因此中间的变为居中。隐含的min-width: auto 防止重叠。

【解决方案2】：

这可以使用 flexbox 来完成。您可以在div 上使用display:flex;，在2nd span 上使用flex-grow:1;。这样你就可以用那个跨度覆盖整个 div。

由于第一个和第三个跨度的宽度已经相等，因此第二个跨度将位于死点。然后在 2 号使用 flex-basis 来获得所需的宽度。

div.container{
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
div.row{
  display:flex;
  align-items:center;
  justify-content:center;
}
span {
  display: inline-block;
  width: 70px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
  transform:translate(50%,0);
}
#b {
}

<html>

<head></head>

<body>
  <div class='container'>
    <div class="row">
      <span id="a">1</span>
      <span id="b">2</span>
      <span id="c">3</span>
      <span id="d">4</span>
    </div>
  </div>
</body>

</html>

【讨论】：

我想要达到的效果与此相反：span 2 占据其自然宽度（或在本例中为 100 像素），而其他两个占据剩余空间等量.
@codebreaker 我想我设法将第二个跨度带到了中心。查看我的更新答案
如果它解决了您的问题，请接受我的回答。如果不是，那么请告诉我我必须对我的答案做些什么，因为我对你的最后评论感到困惑。
这行得通，谢谢。不过，我可能应该指定：div 中的跨度可能不等长。有没有一种方法可以调整此解决方案以支持任意大小的跨度？
只要所有跨度大小相同，它就可以很好地工作。之后，只有 javascript 可以提供帮助。如果它适用于您的情况，请不要忘记接受答案。

【解决方案3】：

我建议使用 3 列布局，并使用 CSS 表格结构。使第 1 列和第 3 列占总宽度的 50%，中间列将只有 0，但它会重新计算宽度以适应内容并保持居中，因为它在表格中。

如果里面有多个单词，也放white-space: nowrap;，但如果只有一个单词或固定宽度，则根据需要删除。

.container {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: top;
  padding: 4px;
  border: 1px solid grey;
}
.item-a {
  width: 50%;
  text-align: right;
}
.item-b {
  text-align: center;
  white-space: nowrap; /* remove as needed */
}
.item-c {
  width: 50%;
}
.item span {
  display: inline-block;
  border: 1px solid red;
}
.item-b span {
  padding: 0 50px; /* for demo only */
}

<div class="container">
  <span class="item item-a">
    <span>1</span>
  </span>
  <span class="item item-b">
    <span>2</span>
  </span>
  <span class="item item-c">
    <span>3</span>
    <span>4</span>
  </span>
</div>

jsFiddle

【讨论】：