css - 列出 : Centering a custom bullet with first line of text

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