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;
}