您可以使用帮助程序：元素之前添加嵌套< span> ：

You can do it with a helper :before element and by adding a nested <span>:

ul li span {
    display: inline-block;  
    vertical-align: middle;     
}

ul li:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;       
}

这里是演示。

这是因为两个inline-block元素将彼此垂直对齐。 ：before 规则创建一个与其父级相同高度的inline-block元素，变量height < span> 可以垂直对齐。

This works because two inline-block elements will vertically align with each other. The :before rule creates an inline-block element that is the same height as its parent, which the variable height <span> can vertically align with.

有关其工作原理的完整说明，查看此答案关于垂直对齐图像。

For a complete explanation of how it works, see this answer about vertically aligning images.