How to vertically align an image in unknown size to the center of a div?

I have a simple HTML button which contains text and an image:

HTML: (Already on 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;}

I can't come up with a combination that would fit these requirements:

• The image and text need to be vertically at the middle of the div, with the text in the middle of the image. It should be neat.
• Horizontally - the image may be in any width, and the button should grow to show it.
• Vertically - the image may be in any height, smaller or larger than the button. When the image is larger, I don't mind if the extra开发者_如何学编程 pixels are displayed or cropped, as long as it is centered.
• The button is in a fixed height. Currently I use line-height to center the text.
• The button should sit nicely in line with other buttons and text.
• The solution needs to work on all latest versions of major browsers, and Internet Explorer 8.

Here's a jsfiddle with my current code: http://jsfiddle.net/EFwgN

(note the small icon is slightly below the center of the button)

A simple solution, if you need no less than IE8 (in Standards mode): http://jsfiddle.net/kizu/EFwgN/31/

Just add margin: -100px 0 to img, so the negative margin would eat any large height:

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

I've added position: relative; top:-2px; just to look it better :)

But if you'll need support for compatibility mode or IE lt 8 (for some reason), the thing with margin won't work. So you'll need an extra markup: http://jsfiddle.net/kizu/EFwgN/28/, but it's somewhat hacky and works only with the fixed button's height (like in your example).

Use table-based display. Requires shrinking of image due to conflict between display:table-cell; and height:24px. Very similar to your aborted attempt from the comments, but includes the required display:block; on the image: http://jsfiddle.net/shanethehat/5ck3s/

There you go, using jQuery:

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

Edit: Just saw that you wanted it pure CSS, well, here's to the code gulfers out there! :)

Why not make the image shrink in the case where it is indeed taller than the button?

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

I probably missed some of the requirements, as setting span.Button's height to auto did the trick for me.

If what you wanted is button growing only horizontally, with vertical overflow cropped, than maybe I'd do it like this:

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;
             }

using a bit of javascript to determine img height, and then center it accordingly.

How about... this?

http://jsfiddle.net/92K8J/

Added display:inline-block to the images, and removed the fixed heightof the container.