¿Cómo alinear verticalmente una imagen de tamaño desconocido al centro de un div?

Question

Tengo un simple botón HTML que contiene texto y una imagen:

HTML:(Ya el http://jsfiddle.net/EFwgN)

<span class="Button"> 
    <img src="http://www.connectedtext.com/Image/ok.gif" /> 
    Small Icon 
</span> 

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px; 
      background-color:#ddd; height:24px; line-height:24px; 
      vertical-align:middle;} 
span.Button img {vertical-align:middle;} 

que pueda Propongo una combinación que se ajuste a estos requisitos:

• La imagen y el texto deben estar verticalmente en el medio del div, con el texto en el medio de la imagen. Debería ser ordenado.
• horizontalmente - la imagen puede estar en cualquier ancho, y el botón debe crecer para mostrarlo.
• Verticalmente - la imagen puede estar en cualquier altura, más pequeña o más grande que el botón. Cuando la imagen es más grande, no me importa si se muestran o recortan los píxeles adicionales, siempre que estén centrados.
• El botón está en una altura fija. Actualmente utilizo line-height para centrar el texto.
• El botón debe quedar bien alineado con otros botones y texto.
• La solución tiene que trabajar en todas las últimas versiones de los principales navegadores, e Internet Explorer 8.

He aquí una jsFiddle con mi código actual: http://jsfiddle.net/EFwgN
(tenga en cuenta el pequeño icono es ligeramente por debajo del centro del botón)

Answer 1

Una solución sencilla, si necesita no menos de IE8 (en modo estándar): http://jsfiddle.net/kizu/EFwgN/31/

Sólo añadir margin: -100px 0-img, por lo que el margen negativo comían cualquier altura grande:

span.Button img {vertical-align:middle; margin:-100px 0; 
       position:relative; top:-2px;} 

He agregado position: relative; top:-2px; solo para verlo mejor :)

Pero si necesita compatibilidad con el modo de compatibilidad o IE lt 8 (por alguna razón), la cosa con margen no funcionará. Por lo tanto, necesitará un marcado adicional: http://jsfiddle.net/kizu/EFwgN/28/, pero es un poco hacky y funciona solo con la altura del botón fijo (como en el ejemplo).

Answer 2

por qué no hacer que la imagen encogimiento en el caso en que de hecho es más alto que el botón?

span.Button img { 
    vertical-align:middle; 
    max-height: 100%; 
} 

Answer 3

Probablemente me olvidé de algunos de los requisitos, como la configuración de span. La altura del auto en automático me sirvió de algo.

Si lo que quieres es botón de crecimiento sólo en horizontal, vertical, con desbordamiento recortada, que tal vez lo haría así:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px; 
      background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden; 
      vertical-align:middle; 
      } 

con un poco de javascript para determinar la altura img y, a continuación, centrarlo en consecuencia.

Answer 4

Utilice la visualización basada en tablas. Requiere contracción de la imagen debido a un conflicto entre display:table-cell; y height:24px. Muy similar a su intento abortado de los comentarios, pero incluye la display:block; requerida en la imagen: http://jsfiddle.net/shanethehat/5ck3s/

Answer 5

hay que ir, usando jQuery:

$(".button img").load(function() 
      { 
       $(this).each(function() 
          { 
           sh = $(this).outerHeight(); 
           if (sh > 24){ 
           alert(sh); 
           $(this).css("margin-top", - (sh - 24)/2 + 'px'); 
           } 
          }); 
      }); 

Editar: acabo de ver que lo quería puro CSS, así , aquí está el código golfo por ahí!:)

Answer 6

¿Qué tal ... esto?

http://jsfiddle.net/92K8J/

Agregado display:inline-block a las imágenes, y se retira el height fijo del contenedor.