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

Question

我试图垂直对齐列表中的一些文本并遇到问题.首先,你需要知道我已经用自定义图像替换了list-style-image.这是我的CSS:

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

我试图看看是否有办法让文本与中间对齐.我试过了:

vertical-align:middle;

这没用,所以我试过:

line-height:50px;

这也没用,所以我试过:

显示:表格

哪个有效,但图像从列表项中消失了....

有没有人知道如何使这个工作？

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

Answer 2

你可以有

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