CSS 居中文本列

Question

我在

中有一些歌词，有以下类:

.lyrics
{
    /* position */
    margin: 40px;

    /* text */
    font-size: 18px;
    text-align: center;
    column-width: 300px;
    column-gap: 0;
    column-fill: auto;
    height: 420px;
    max-height: 420px;
}

整个 div 的宽度限制为 1120px，高度限制为 520px。

如果歌词填满 3 列，它看起来不错。但是，如果歌词填满 2 列，则第三列的空间留空。

有没有办法让 3 栏歌词保持原样，但让 2 栏歌词居中，保持栏间距不变，而不用在 javascript 中对歌词进行切片并自行处理布局？

例子

3 列的正确行为:https://jsfiddle.net/udc9d1go/2/
2 列的不正确行为:https://jsfiddle.net/45f23o82/

最佳答案

您可以尝试清除容器的高度设置。这样高度将是动态的，即根据内容，如果内容是简单文本(按行，而不是单独的 block )，它应该均匀分布在三列中。

关于CSS 居中文本列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44895571/

Answer 1

您可以尝试清除容器的高度设置。这样高度将是动态的，即根据内容，如果内容是简单文本(按行，而不是单独的 block )，它应该均匀分布在三列中。