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

Question

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

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

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

垂直对齐：中间；

这没有用，所以我尝试了：

行高：50px；

这也没有用，所以我尝试了：

显示：表格

这有效，但图像从列表项中消失….

有谁知道让这个工作的方法？

原文由 r3plica 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 list-style-image 的问题是你不能与文本对齐，最好的办法是使用 background-image li 元素，然后使用 padding-left 为你的 li 元素。

越野车演示 （您面临的问题）

演示

ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以有

<li><span style="top:-5px; position:relative;">

文本向上移动 5px

原文由 Fanky 发布，翻译遵循 CC BY-SA 4.0 许可协议