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

Question

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)

Answer 1

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).

Answer 2

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/