List vertical align text middle with list-style-image

you can have

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.

Buggy Demo (The issue which you are facing)

Demo

ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}