Html 在CSS网格内垂直对齐列表项

如何在CSS网格中真正对齐列表项

使用“垂直对齐中间”似乎没有任何作用。为什么垂直对齐中间在CSS网格中不起作用

以下是第一次尝试：

。子列表网格{
显示：网格；
}
.列表网格{
显示：网格；
显示：-ms网格；
-ms网格列：自动；
网格模板列：自动；
}
.李先生{
线高：30px；
字体大小：14px；
左侧填充：30px；
右边填充：10px；
列表样式位置：内部；
宽度：230px；
文本转换：无；
}

对齐项目

可以工作，但必须将其放置在网格父项/容器上

。子列表网格{
显示：网格；
}
.列表网格{
显示：网格；
显示：-ms网格；
-ms网格列：自动；
网格模板列：自动；
/*行得通*/
对齐项目：居中；
}
.李先生{
线高：30px；
字体大小：14px；
左侧填充：30px；
右边填充：10px；
列表样式位置：内部；
宽度：230px；
文本转换：无；
边框：1px纯灰；
}

好的，我知道了：

它是：

因此：

。子列表网格{
显示：网格；
}
.列表网格{
显示：网格；
显示：-ms网格；
-ms网格列：自动；
网格模板列：自动；
}
.李先生{
/*就是这个*/
显示器：flex；
对齐项目：居中；
线高：30px；
字体大小：14px；
左侧填充：30px；
右边填充：10px；
列表样式位置：内部；
宽度：230px；
文本转换：无；
}

.list-grid li {
   display: flex;
   align-items: center;
}