Question

I am using the sprite image to make the bullet for unordered list. It works fine but that image is showing slightly upper to the starting position of the text. The text and image should be in the same line. How can I do that?

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;

    }

and the 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>  

Answer 1

Make your container the same height for your background image portion. And then you can use line-height to align your text to appear centerized vertically to your image.