Html 无序列表图像出现在文本的起始位置？

我正在使用精灵图像制作无序列表的项目符号。它工作得很好，但该图像显示的位置略高于文本的起始位置。文本和图像应在同一行中。我该怎么做

body
    {
        font-family:Arial;
        font-size:16px;
    }
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; 
        padding:0;
    }

    .magenta li 
    {
        background-image: url(images/css-sprite.png);
        background-repeat:no-repeat;
        padding-left:20px;
        background-position: 0px -2036px;

    }

还有html

<div>
    <p>Magenta</p>
    <ul class="magenta bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>  

洋红



Lorem ipsum dolor sit amet，是一位杰出的献身者。没有智慧，没有尊严，没有尊严。莫里斯·亨德雷特·廷西顿·努克调味品accumsan。Donec semper hendrerit ligula non blandit。这句话的意思是：“我不知道该怎么说。”。梅塞纳斯·马萨·尼布，射手座的亨德雷特·奥纳雷，中间人坐着埃米特·泰勒斯。在莱克托斯·内克的演讲中，波苏尔在英特杜姆·维塔伊的演讲中，我在酒后驾车。毛里斯·埃吉特·厄罗斯·麦格纳，她是一名孕妇。


Lorem ipsum dolor sit amet，是一位杰出的献身者。没有智慧，没有尊严，没有尊严。莫里斯·亨德雷特·廷西顿·努克调味品accumsan。Donec semper hendrerit ligula non blandit。这句话的意思是：“我不知道该怎么说。”。梅塞纳斯·马萨·尼布，射手座的亨德雷特·奥纳雷，中间人坐着埃米特·泰勒斯。在莱克托斯·内克的演讲中，波苏尔在英特杜姆·维塔伊的演讲中，我在酒后驾车。毛里斯·埃吉特·厄罗斯·麦格纳，她是一名孕妇。

使容器与背景图像部分的高度相同。然后，您可以使用线条高度将文本与图像垂直居中对齐。

使用精灵很难做到这一点。如果图像本身就是这样，那么显而易见的解决方案是：

.magenta li { background-position: 0 50%; }

但是，如果您打算保留精灵，我建议您实际包含另一个元素来显示图像：

<li>
    <em></em>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>

---

如果我应用行高，它在图像和内容的起点位置相同的情况下工作良好。但是内容会变得拥挤。

.bullet li {
    position: relative;
    padding: 0 0 25px; }
.bullet em {
    background: url(images/css-sprite.png) 0px -2036px no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0; }