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

Question

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

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

我无法想出符合这些要求的组合:

• 图像和文本需要垂直位于div的中间,文本位于图像的中间.它应该是整洁的.
• 水平 - 图像可以是任何宽度,按钮应该增长以显示它.
• 垂直 - 图像可以是任何高度,小于或大于按钮.当图像较大时,我不介意是否显示或裁剪多余的像素,只要它居中.
• 按钮处于固定高度.目前我line-height用来集中文本.
• 按钮应与其他按钮和文本完美匹配.
• 该解决方案需要适用于所有最新版本的主流浏览器和Internet Explorer 8.

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

Answer 1

一个简单的解决方案，如果您需要不低于 IE8（在标准模式下）： http: //jsfiddle.net/kizu/EFwgN/31/

只需添加margin: -100px 0到img，这样负边距就会吃掉任何大的高度：

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

我添加position: relative; top:-2px;只是为了看起来更好:)

但是，如果您需要兼容模式或 IE lt 8（出于某种原因）的支持，则带有边距的东西将不起作用。因此，您需要一个额外的标记：http://jsfiddle.net/kizu/EFwgN/28/，但它有点hacky并且仅适用于固定按钮的高度（如您的示例中所示）。