Demo Fiddle

Question

可能（希望）一个简单的问题：

我在一个无序列表中使用png作为子弹，使用此处的代码：

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

我对此做出的唯一变化是将垂直背景位置设置为50％，以便无论文本大小等，子弹都保持居中（和/或避免需要不同大小的子弹png，具体取决于文字大小）。

唯一的问题是，如果列表中的文本移动到第二行，则子弹以文本的两行宽度居中（换句话说，子弹位于两行之间的空间附近）。

是否可以使子弹以字体高度为中心，但仅限于第一行？

提前为任何提示干杯。

Answer 1

也许尝试为元素设置相对行高，并使用伪元素来保存项目符号。这适用于任何文字大小：

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

Answer 2

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

列表：使用第一行文本居中自定义项目符号

2 个答案:

Demo Fiddle