CSS: alinear verticalmente el texto en el elemento li, no funciona

Uso una imagen de estilo de lista para los elementos li y un texto de una sola línea.

Pero se ve mal, así que quiero alinear verticalmente el texto en el centro de la imagen.

Debería usar la alineación vertical: medio, ¿verdad? Pero no funcionó para mí.

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

Respuestas a la pregunta(3)

Su respuesta a la pregunta