Javascript 如果没有巨大的线间距，无法垂直对齐多条线

我有一个JS MixItUp，它放在文本框中，但我似乎无法让它在一个框中获得多行，垂直对齐，并保持在元素中

要垂直对齐，我需要设置线条高度并将垂直对齐设置为中间

我将行高度设置为方框45px的大小

在这里，您可以在底部框中看到问题- 这些词是从盒子里直接写出来的

.courses span {
    border: 1px solid white;
    color: black;
    display: grid;
    font-size: 11px;
    height: 45px;
    background: #ffffff;
    border: 2px solid #505050;
    line-height: 45px;
    vertical-align: middle;
    margin: 4px 0;
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}

我也尝试了以下操作，但单行将位于框的顶部。

使框的位置相对，使span的位置绝对。

.courses span {
    border: 1px solid white;
    color: black;
    display: grid;
    font-size: 11px;
    height: 45px;
    background: #ffffff;
    border: 2px solid #505050;
    line-height: 45px;
    vertical-align: middle;
    margin: 4px 0;
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}

比如说,

box{
    position:relative;
    display:block;
}

.courses span{
    position:absolute;
    text-align: center;
}

---

在代码中尝试将这些属性与其他属性（垂直对齐属性除外）一起使用

css代码中的一些更改

请尝试此更新的代码笔：-

---

当我有position:absolute时，它真的把我链接的代码笔中的功能搞砸了。不仅如此，文本似乎仍然没有垂直对齐