List vertical align text middle with list-style-image

css, html, list

Solution

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

Problem

I am trying to vertically align some text within a list li and having issues. First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS: ``` ul.cogs li { list-style-image: url(Images/li_cog.png); height: 50px; line-height: 50px; } ``` I tried to see if there was a way of getting the text to align to the middle. I tried: vertical-align: middle; which didn't work, so then I tried: line-height: 50px; which also did not work, so I tried: display: table which worked, but the image disappears from the list item.... Does anyone know of a way to get this to work?

Original source