Html 列表垂直对齐文本中间与列表样式图像

我试图垂直对齐列表中的一些文本，但遇到了问题。 首先，你需要知道我已经用自定义图像替换了我的列表样式图像。这是我的CSS：

ul.cogs li { 
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px; 
}

我试着看看是否有办法让文本对齐到中间。 我试过：

垂直对齐：中间对齐

这不起作用，所以我试着：

线高：50px

这也不起作用，所以我试着：

显示：表格

这起作用了，但是图像从列表项中消失了

---

有人知道如何使其工作吗？

使用

列表样式图像的问题在于无法与文本对齐，最好的做法是对
li
元素使用
背景图像
，然后对
li
元素使用
左填充

（你所面临的问题）


你可以

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

文本上移5px
怎么样

ul.cogs li {
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px;  
    position: relative;
}

ul li span {
    position: absolute;
    top: (x)px;
    left: (x)px;
}

仅供参考：
垂直对齐
属性将适用于
表格
或
表格单元格
如果使用
最小高度
而不是
行高度
，则
中的文本换行到下一行时的行距将与页面上的其他文本保持相同。但是当它是一行，并且项目符号图像大于行高时，它不会在下一个
中与项目符号重叠这会移动文本和图像。此解决方案非常适合我的需要。似乎这是一个常见的问题-谢谢分享！
ul.cogs li {
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px;  
    position: relative;
}

ul li span {
    position: absolute;
    top: (x)px;
    left: (x)px;
}