CSS: pionowe wyrównanie tekstu w elemencie li, nie działa

Używam obrazu list-style dla elementów li i tekstu jednowierszowego.

Ale wygląda źle, więc chcę ustawić tekst w pionie na środku obrazu.

Powinienem użyć vertical-align: middle, right? Ale dla mnie to nie zadziałało.

<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