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)

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

回答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/

回答3:

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! :)

回答4:

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

回答5:

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.

回答6:

How about... this?

http://jsfiddle.net/92K8J/

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

来源：https://stackoverflow.com/questions/7228762/how-to-vertically-align-an-image-in-unknown-size-to-the-center-of-a-div

标签

html

css

vertical-alignment