Offset bullet image in UL using CSS

Total Post:154

Points:1086
 1898  View(s)
Ratings:
Rate this:
Hi developers!

In my unordered list, I use an image for the bullet but the bullet appears aligned with the bottom of the text to the right of it. I would like to have it positioned in the middle of the text's height. Is there some way in css to center or add an offset to the bullet?

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul> 
ul
{
  list-style-image: url('/images/bullet_blue_8x8.png');
}

thanks in advance


  1. Post:105

    Points:735
    Re: Offset bullet image in UL using CSS

    Hi Manoj!

    try this
    ul{
         margin:0;
         padding:0;
         list-style:none;
        }
    li {
        background:url("/images/bullet_blue_8x8.png") no-repeat 0 -2px;
        padding-left:18px;
        font-size:12px;
        } 

    You need to use background-image.

      Modified On Mar-30-2018 11:48:53 PM

Answer