UL中的偏移子弹图像

Question

在我的无序列表中，我使用图像作为子弹，但子弹显示与其右侧的文本底部对齐。我想让它位于文本高度的中间。是否有一些方法在CSS中心或添加一个偏移量的子弹？

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 

ul 
{ 
    list-style-image: url('/images/bullet_blue_8x8.png'); 
} 

Answer 1

ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    } 
li { 
    background:url("/images/bullet_blue_8x8.png") no-repeat 0 -2px; 
    padding-left:18px; 
    font-size:12px; 
    } 

您需要使用的背景图像。

Answer 2

而不是使用list-style-image可以使用background-image和使用background-position:财产子弹立场。

或者，如果你愿意，你也可以使用:before伪

Demo

ul li { 
    background-image: url(http://www.tandf.co.uk/journals/society/images/icon_pdf.gif); 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    margin-bottom: 10px; 
    background-position: 0 1px; /* X = 0 and Y = 1px */ 
}