如何将未知尺寸的图像垂直对齐到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/

只需在img添加margin: -100px 0 ，那么负的margin会margin: -100px 0任何较大的高度：

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

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

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

Answer 2

使用基于表格的显示。 由于display:table-cell;之间的冲突，需要缩小图像display:table-cell; 和height:24px 。 与您在评论中中止的尝试非常相似，但包括必需的display:block; 在图片上： http : //jsfiddle.net/shanethehat/5ck3s/

Answer 3

使用jQuery，就可以了：

$(".button img").load(function()
          {
              $(this).each(function()
                           {
                               sh = $(this).outerHeight();
                               if (sh > 24){
                               alert(sh);
                              $(this).css("margin-top", - (sh - 24) / 2 + 'px');
                              }
                           });
          });

编辑：刚刚看到您想要纯CSS，那么这里就是代码仓库！ :)

Answer 4

如果图像确实比按钮高，为什么不缩小图像呢？

span.Button img {
  vertical-align:middle;
  max-height: 100%;
}

Answer 5

我可能错过了一些要求，因为将span.Button的高度设置为auto可以帮到我。

如果您想要的是按钮仅水平增长，裁剪垂直溢出，那么我可能会这样做：

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

使用一些JavaScript来确定img高度，然后相应地将其居中。

Answer 6

这个怎么样？

http://jsfiddle.net/92K8J/

向图像添加了display:inline-block ，并删除了容器的固定height 。