如何将未知大小的图像垂直对齐到div的中心？

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

我有一个简单的HTML按钮,其中包含文本和图像:

HTML: (Already on http://jsfiddle.net/EFwgN)

HTML :(已经在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.

图像和文本需要垂直位于div的中间,文本位于图像的中间。它应该是整洁的。

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.

该解决方案需要适用于所有最新版本的主流浏览器和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)

这是我当前代码的一个jsfiddle:http://jsfiddle.net/EFwgN(注意小图标略低于按钮的中心)

6 个解决方案

#1

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

一个简单的解决方案,如果你需要不低于IE8(在标准模式下):http://jsfiddle.net/kizu/EFwgN/31/

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

只需添加保证金:-100px 0到img,所以负边距会吃掉任何大的高度:

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

我添加了位置:相对;顶部:-2px;只是为了看起来更好:)

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

但是如果您需要支持兼容模式或IE lt 8(由于某种原因),带边距的东西将无效。所以你需要一个额外的标记:http://jsfiddle.net/kizu/EFwgN/28/,但它有点hacky并且仅适用于固定按钮的高度(就像你的例子中一样)。

#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/

使用基于表格的显示。由于display:table-cell之间的冲突,需要缩小图像;和身高:24px。非常类似于您从评论中止的尝试,但包括所需的显示:块;在图像上:http://jsfiddle.net/shanethehat/5ck3s/

#3

There you go, using jQuery:

你去,使用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! :)

编辑:刚刚看到你想要它纯CSS,嗯,这里是代码gulfers那里! :)

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

我可能错过了一些要求,因为设置了span.Button的自动高度为我做了诀窍。

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.

使用一些javascript来确定img高度,然后相应地居中。

#6

How about... this?

这个怎么样?

http://jsfiddle.net/92K8J/

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

添加了显示:内嵌块到图像,并删除了容器的固定高度。

#1