Html 如何在三列布局中保持可变宽度列居中？

我有一个类似工具栏的控件。在左侧，显示可变大小的文本。中间是一小段文字。在右边，有更多的文字

我希望中心文本始终居中，并且只占用所需的空间。左侧和右侧应展开以填充可用空间，然后进行换行

我试过的都不管用。以下是我的尝试：

不居中： 左左左 居中 正当 不在同一行： 左左左 居中 正当 “左”不会将空间填充到中心内容： 左左左 居中 正当

---

左边是可变大小的文本

中间是一小块文字，它占据了所需的空间

在右边，有更多的文字

左侧和右侧应展开以填充可用空间，然后进行换行

这是你期待的吗

使用col auto类获取可用空间。 如果左边的宽度相同，文本应该换行，则可以使用col-4或col-3类预定义

左左左 居中 正当

---

是否要将左侧文字一直添加到居中文字？请尝试向中柱添加更多文字。不幸的是，它在某一点上失败了。@isherwood在问题中提到，中心是一小块文本，它应该占用它所需要的空间，而不是换行符，这就是我这样做的原因。是的，当我们添加更多的文本并将其居中时，分区不会自动换行并失败。这对我的应用程序非常有效。中间文本不会有太大变化。现在我得想办法让它反应灵敏。它很好地折叠到某一点，但随后无法正确堆叠。将尝试col md-*。@ccleve很高兴它有帮助：