How to position list bullets?

HTML & CSS
1

Hey

I’ve got this menu,


        <li class="active"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>

and this css style,


.menu ul {
margin:0;
padding:0;
list-style-position:inside;
}

.menu li {
margin:0 0 0 0;
padding:5px 0 5px 0;
list-style-image:url(img/menu_passive.png);
}

So basically you can see that I have this menu list, which has custom bullets.
But the problem is that, the bullets aren’t aligned with the text.
The text is in bottom left, when the bullets are left middle.
I want the text and the bullets be centered.

How do you do this?

2

Firstly, you need to give the menu some left padding so that the images have space to appear. Then you can position the image half-way down the side by setting the y-access to 50%, like so. See if this helps:

.menu li {
  margin:0 0 0 0;
  padding:5px 0 5px [COLOR="Red"]10px[/COLOR]; /* adjust padding to suit */
  list-style-image:url(img/menu_passive.png) [COLOR="Red"]0 50%[/COLOR];
}