CSS: alinhar vertical o texto no item li, não funciona

Eu uso uma imagem de estilo de lista para itens li e um texto de linha única.

Mas parece ruim, então eu quero alinhar verticalmente o texto para o meio da imagem.

Eu deveria usar vertical-align: middle, right? Mas não funcionou para mim.

<code><html>
    <head>
        <title> This is an demo </title>
        <style>
            body {
                background-color: #464443;
                color: white;
            }
            ul {
                list-style-image: url('bg.png');
            }

            li {
                vertical-align: middle;
            }

        </style>
    </head>

    <body>
        <ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>
    </body>
</html>
</code>

questionAnswers(3)

yourAnswerToTheQuestion