CSS Getting text to align properly in list with custom bullet

Question

I am trying to get the text in my list to align properly, but I can't get it right.

As you can see the text is slightly off and starts at the "image bullet" baseline. I want it to be in the middle.

Source:

//CSS
ul  {
    list-style-image:url(image/li.png);
    list-style-position:outside;
    margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
}

//HTML
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Answer 1

Now define your li background image and define background position according to your design

ul  {
    list-style:none;
     margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
  background:url('') no-repeat 0 0;
  padding-left:40px;  // according to your image with
  min-height:40px; // according to your image height
}

Demo

DEMO2 As per OP's exact requirement