[SOLUCIONADO] Alinear texto e imagen un un <li>

[mblascog]

Buenas,
He creado la siguiente lista. Me gustaría, en una de las opciones, combinar el texto con una imagen.


Lo que no me gusta es la alineación del texto con la imagen. Me gustaría que fuera centrada verticalmente.
Se puede consultar el ejemplo en http://www.tepui.cat/foro/index.html
Para visualizar el ejemplo hay que redimensionar el navegador a una anchura máxima de 360px y seleccionar el icono menú, que está a la parte superior izquierda

Gracias

[pzin]

Como la imagen es un elemento en linea, te bastaría con ponerle:

Código CSS:

vertical-align: middle;
 

[mblascog]

Buenas pzin,
Ya tengo puesto el vertical-align, pero no sé ver qué propiedad la invalida.
Controlo con media screen la visualización en los móviles, y aquí tengo el siguiente código:

Código CSS:

nav ul li{clear:both;box-sizing:border-box;-moz-box-sizing:border-box;font-size:1.2em;width:100%;text-align:left;height:40px;border:1px solid #000;vertical-align:middle;padding:10px;font-weight:bold;}
 

Gracias.

[pzin]

Lo que quieres centrar verticalmente es la imagen, así que tienes que aplicárselo a la imagen.

[mblascog]

Gracias de nuevo pzin,
Con tu sugerencia lo único que he conseguido es alinear el texto, pero la imagen se queda igual:

Gracias

[pzin]

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:

li {
  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:

img {
  position: relative;
  top: -10px;
}
 

Ya el valor que sea lo miras tú.

[mblascog]

Gracias pzin de nuevo,
Seguro que llevas la razón, pero hay una cosa que no entiendo de lo que me dices. Comentas que la imagen es demasiado grande, 30x30.
A nav ul li le he indicado height:40px, por lo que entiendo que la imagen debe caber, no?

[pzin]

Iniciado por mblascog

Seguro que llevas la razón, pero hay una cosa que no entiendo de lo que me dices. Comentas que la imagen es demasiado grande, 30x30.
A nav ul li le he indicado height:40px, por lo que entiendo que la imagen debe caber, no?

Pero estás cambiando el modelo de caja con box-sizing haciendo que borde y relleno formen parte de esos 40 píxeles. Si usas la herramienta de desarrolladores verás que la altura es computada a 14 píxeles:

[mblascog]

Muchas gracias pzin,
Me faltan muchos conocimientos. Por la noche miro de entenderlo.

[mblascog]

Buenas pzin,
Suelo usar la herramienta para desarrolladores, pero aún no la acabo de dominar.
He sacado el box-sizing y la altura de <li> ahora es de 40 píxeles, que es lo correcto.
El enlace <a> 16 píxeles y la imagen 30. No debería salir todo centrado verticalmente ahora?
Gracias

[pzin]

¿Le volviste a quitar el alineamiento vertical a la imagen?

[mblascog]

Buenas pzin,
La verdad es que no, está puesto el alineamiento vertical a la imagen, pero no se ve desde las herramientas de desarrolladores y no entiendo por qué. Si miras la hoja de estilos está en la linea 203.

Gracias.

[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

[pzin]

Iniciado por mblascog

La verdad es que no, está puesto el alineamiento vertical a la imagen, pero no se ve desde las herramientas de desarrolladores y no entiendo por qué. Si miras la hoja de estilos está en la linea 203.

Pues es raro que lo tengas puesto y no se aplique.

Edito: Veo que si que está puesto. Solo tienes que centrar el texto verticalmente, lo puedes hacer aplicando un line-height al enlace:

Código CSS:

nav ul li a {
  line-height: 40px;
}
 

Del mismo tamaño que el tamaño que tenga li.

[mblascog]

Tema resulto.
Muchas gracias pzin.