列表：圍繞文本

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