Pero el problema no es el centrado de la imagen en si misma, que está centrada, sino que la imagen es demasiado grande ¿no? De hecho si cambias el valor de
middle a
bottom o
top verás que la imagen cambia su alineación, aunque parezca que lo haga el texto, pero es porque es demasiado grande. Entonces o bien pones la imagen más pequeña, o amplias el
padding de la lista, o aumentas el tamaño de la fuente, etc. La cuestión es hacerle espacio a la imagen.
También puedes poner la imagen en un posición absoluta y hacer algo así:
Código CSS:
Ver originalli {
position: relative;
}
img {
position: absolute;
top: calc(50% - Xpx);
}
Donde X es la mitad de la altura de la imagen. O también puedes usar
translateY(-50%) para no andar calculando nada ni poniendo posiciones absolutas ni relativas —esto sería ya añadiendo prefijos propietarios. O simplemente mover la imagen hacia arriba con:
Código CSS:
Ver originalimg {
position: relative;
top: -10px;
}
Ya el valor que sea lo miras tú.