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

Question

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

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

我试着看看是否有办法让文本居中对齐。我试过:

vertical-align: middle;

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

line-height: 50px;

这也不起作用，所以我尝试了:

display: table

有效，但是图像从列表项中消失了....

有谁知道有什么方法可以让它发挥作用吗？

Answer 1

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

Buggy Demo (您面临的问题)

Demo

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;
}