CSS: ¿Por qué “vertical-align: middle” no funciona?

Considere el siguiente ejemplo: ( demostración en vivo aquí )

HTML:

 

CSS:

 a { display: block; background: #000; line-height: 40px; } img { vertical-align: middle; } 

El resultado es:

enter image description here

¿Por qué la imagen no está centrada verticalmente?

¿Cómo podría arreglar eso para que funcione en todos los principales navegadores?

No asum ningún tamaño de imagen (como 32×32 en este caso), porque en el caso real el tamaño de la imagen es desconocido.

Puedes usar position:absolute; para esto.

Por ejemplo:

 a { display: block; background: #000; line-height: 40px; height:80px; position:relative; } img { position:absolute; top:50%; margin-top:-16px; } 

NOTA : Esto proporciona la mitad margin-top del tamaño de la imagen.

Mira esto http://jsfiddle.net/cXUnT/7/

Realmente no puedo decirle los detalles de por qué sucede esto (tengo curiosidad) . Pero esto funciona para mí:

 a { display: block; background: #000; line-height: 40px; } img { vertical-align: middle; margin-top:-4px; /* this work for me with any given line-height or img height */ } 

Debería tener display: table-cell , creo, esto funciona solo en tablas. Utilizo line-height igual a la altura del elemento y también funciona.

Yo tuve el mismo problema. Esto funciona para mí:

   

Si conoce el tamaño vertical del elemento y la altura de la línea, puede centrarlo vertical-align: top utilizando vertical-align: top más un margen superior.

Por ejemplo, creé: http://jsfiddle.net/feklee/cXUnT/30/

Simplemente coloque la etiqueta img dentro de una etiqueta div en la visualización establecida: table-cell vertical-align: middle to the div. La etiqueta principal debe mostrarse: tabla

Ejemplo:

Css

 a { display: table; background: #000; height:200px; } div { display:table-cell; vertical-align: middle; } 

HTML

  

No estoy seguro de cuál es la causa.

Eliminar el line-height la line-height y agregar margins a la imagen hace el truco.

 a { display: block; background: #f00; } img { margin: .3em auto; vertical-align: middle; } 
    

Intenta usar una imagen de fondo en un :

  a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}