Html 将一个元素与多个同级元素居中

我有一个div，里面有一些跨距，宽度可能相等，也可能不相等。我知道我可以使用

text align:center

使div中的所有内容居中。但是，我想选择一个特定的跨度，并将其指定为真正的中心，而不是将中心指定为跨度序列的中点

我必须模拟这种效果的一个想法是：我想要一个中间元素，它的左右两边各有两个容器；左对齐是右对齐，反之亦然。这些容器将容纳div中的其他内容。如果我可以让这两个容器以相等的数量填充剩余的空间，这将产生使中间元素居中的效果，同时保持左右内容与中心对齐。基本上，这需要将两个容器的宽度设置为div中剩余空间的一半（我不想更改中间div的大小）。这是否可以只使用CSS

示例：对于4个跨距，如何将跨距2指定为真正的中心

div{
宽度：500px；
填充：4px；
边框：1px点黑色；
}
跨度{
显示：内联块；
宽度：100px；
文本对齐：居中；
保证金：4倍；
框大小：边框框；
边框：1px点黑色；
}
#b{
/* ??? */
}

1.
2.
3.
4.

这可以使用flexbox完成。您可以使用

display:flexdiv

上选择code>，并使用

flex-grow:1

上的code>。这样你就可以用这个跨度覆盖整个分区

由于第一跨和第三跨的宽度已经相等，因此第二跨将位于死点。然后在2号使用

flex basis

，以获得所需的宽度

div.container{
宽度：500px；
填充：4px；
边框：1px点黑色；
}
分区行{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
跨度{
显示：内联块；
宽度：70px；
文本对齐：居中；
保证金：4倍；
框大小：边框框；
边框：1px点黑色；
转换：转换（50%，0）；
}
#b{
}

1.
2.
3.
4.

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

同时放入

空白：nowrap如果里面有多个单词，请在需要时删除它，如果只有一个单词或固定宽度


.container{
显示：表格；
边界塌陷：塌陷；
宽度：100%；
}
.项目{
显示：表格单元格；
垂直对齐：顶部；
填充：4px；
边框：1px纯灰；
}
.项目a{
宽度：50%；
文本对齐：右对齐；
}
.项目b{
文本对齐：居中；
空白：nowrap；/*根据需要删除*/
}
.项目-c{
宽度：50%；
}
.项目跨度{
显示：内联块；
边框：1px纯红；
}
.b项跨度{
填充：0 50px；/*仅用于演示*/
}

1.
2.
3.
4.
您可以使用flexbox。基于


。外包装器{
显示器：flex；
填充：4px；
边框：1px点黑色；
}
.项目{
保证金：4倍；
文本对齐：居中；
边框：1px点黑色；
}
.left.inner-wrapper、.right.inner-wrapper{
弹性：1；
显示器：flex；
调整项目：灵活启动；
最小宽度：-webkit最小内容；/*解决Chrome错误的方法*/
}
.左.内包装{
证明内容：柔性端；
}
.制作动画{
动画：动画5s无限交替；
}
@关键帧动画{
从{最小宽度：0}
至{最小宽度：50vw；}
}

1.左边
2.居中
3.赖特
4.赖特
1.左2。中心3。对。对。左2。中心3。对。对。左2。中心3。对。正确的
对于中间一个居中的奇数个元素（如3）有很多答案，但我有兴趣看到第二个居中的偶数个元素（如4）的优雅解决方案。我试图实现的是与此相反的结果：跨度2占据其自然宽度（或者在本例中为100px）另外两个同样占据了剩余的空间。@codebreaker我想我设法把第二跨带到了中间。查看我的最新答案如果它解决了您的问题，请接受我的答案。如果没有，请告诉我对我的答案有什么补充，因为我被你最后的评论弄糊涂了。这很有效，谢谢。不过，我可能应该指定：div中的跨距可能不是等长的。有没有一种方法可以使这个解决方案适应于支持任意大小的跨度？只要所有跨度的大小都相同，它就可以很好地工作。在此之后，只有javascript可以提供帮助。请不要忘记接受答案，如果它在你的情况下有效。我花了一分钟来弄清楚动画中发生了什么，但这真的很酷。不过，我认为flex框是基于空白而不是宽度工作的。这不是这里发生的事情，是吗？@codebreaker解释在链接的答案中，我使用三个代表左、中、右的弹性框。左侧和右侧的初始尺寸为0宽度，然后它们增长以填充剩余空间，因此中间的一个变为中心。隐式
min width:auto
可防止重叠。