Alinear texto e imagen un un <li>

[mblascog]

Buenas,
No hay manera de encontrar donde está el error, sigo sin ser capaç de alinear verticalmente texto e imagen en una etiqueta <li>
El código css general, es el siguiente:

Código CSS:

nav{clear:both;float:left;width:100%;padding-bottom:1%;}
 
nav ul {background:gray;}
 
nav ul li{
    background:gray;
/*  box-sizing:border-box;
    -moz-box-sizing:border-box;*/
    display:inline-block;
    font-size:.9em;
/*  float:left; */
    width:16.3%;
    text-align:center;
    padding:0.5%;
    margin:0;
    height:25px;
}
nav ul li:hover{
    font-weight:bold;   
    background:rgba(0,0,0,.6);
}
nav ul li a{
    color:white;
    text-transform:uppercase;
}
 

Y el que en estos momentos me está llevando de cabeza, cuando la web se visualiza en un móvil, es el siguiente:

Código CSS:

@media screen and (max-width:360px) {
    body {font-size:0.7em;}
    #menu{display:inline;}
    #bandera{display:inline;}
    nav{padding:0;display:none;}
    nav ul li{font-size:1.2em;width:100%;text-align:left;height:40px;border:1px solid #000;padding-left:10px;font-weight:bold;vertical-align:middle;}
    nav ul li a{height:100%;vertical-align:middle;}
    nav ul li img {vertical-align:middle;}
    h1{font:1.5em/1.0 'Arial';font-weight:bold;background:gray;padding:3%;}
    section{background:white;font:1.2em/2.0 'Arial'}
}
 

Alguna sugerencia, por favor!!!
Gracias