html - 如何将未知大小的图像垂直对齐到 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/ ，但它有点老套，并且仅适用于固定按钮的高度(如您的示例)。