列表：围绕文本

Question

可能（希望）一个简单的问题的第一线定制的子弹：

我使用的是PNG在使用代码的无序列表子弹发现这里：

li { 
background:url(../images/bullet.png) 0 0 no-repeat; 
list-style:none; 
padding-left:10px; 
} 

我对此做出的唯一变化是将垂直背景位置设置为50％，以便不管文本的大小如何，子弹都保持居中状态（和/或避免根据文本需要不同大小的项目符号png尺寸）。

与此唯一的问题是，如果在列表中的文本移动到第二行，以文本的两线宽度子弹中心（换言之子弹位于某处的两条线之间的空间附近） 。

是否有可能让子弹以字体高度为中心，但只有第一行？

提前欢呼任何提示。

Answer 1

Demo Fiddle

似乎在这里工作：

HTML

<ul> 
    <li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li> 
</ul> 

CSS

ul { 
    list-style:none; 
} 
li { 
    background:url(http://drjohnart.com/wp-content/uploads/2011/11/bullet-point.gif) 0 0 no-repeat; 
    padding-left:20px; 
    margin:0; 
} 

Answer 2

也许尝试相对行高设置为元素，并使用伪元素保持子弹。这适用于任何文字大小：

ul { 
    line-height: 1.25; 
    font-size: 16px; 
} 

ul li { 
    list-style:none; 
    position: relative; 
} 

ul li:before { 
    position: absolute; 
    content: ''; 
    width: 1em; 
    height: 1em; 
    margin-left: -1.5em; 
    margin-top: .2em; 
    line-height: inherit; 
    background:url(../images/bullet.png) 50% 50% no-repeat; 
    list-style:none; 
    padding-left:10px; 
}