alineación vertical img y texto dentro de li

Question

Estoy tratando de alinear verticalmente a la mitad una imagen y un texto dentro de un elemento de lista, pero sin tener suerte.

por ejemplo:

<ul> 
<li><img src="somepath" /> sometext 
    </li> 
<li><img src="somepath2" /> sometext2 
    </li> 
</ul> 

cómo puedo hacerlo? gracias

Answer 1

Suponiendo que los elementos de lista tienen una altura fija, se puede utilizar en combinación con line-heightvertical-align: middle para hacer esto.

Ejemplo:

ul li { 
    display: block; 
    height: 100px; 
    line-height: 100px; 
} 

ul li img { 
    vertical-align: middle; 
} 

Working example here.

Answer 2

Usted debe ser capaz de utilizar la propiedad CSS "vertical-align" para la etiqueta img. Ejemplo:

<style type="text/css"> 
    img { vertical-align: middle; } 
</style> 
<ul> 
    <li><img src="test.jpg" />test</li> 
</ul> 

Answer 3

Si conoce la altura de la imagen (suponiendo que es un icono), se puede ajustar la altura de la línea a la altura de la imagen. Entonces debería funcionar configurando vertical-align:middle. Ver un ejemplo en vivo en w3schools: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

Answer 4

Debe ajustar el texto dentro de "Li"

<li><div><span>My text</span></div></li> 

li div{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
li span{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 5

A raíz de las respuestas anteriores que sugieren que el método de línea de altura para el centrado vertical. Si aplica una fuente que tiene glifos que no están centrados verticalmente en el archivo de fuente, el resultado será que su elemento tampoco estará centrado verticalmente, sino que se colocará más alto o más bajo de lo que debería ser.

Tuve este problema y fue difícil de hacer. Si su elemento no se alinea verticalmente y no puede resolver por qué, intente aplicar una fuente estándar como 'Arial'.

See here for more information.