如何将一个未知大小的图片垂直居中对齐到一个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
（注意，小图标略低于按钮中心）

- Kobi

---

我知道有无数个重复的，但我却无法让任何东西正常工作... - Kobi

我找到了一种禁用兼容性视图的方法 - 所以没有额外的奖励分数！http://twigstechtips.blogspot.com/2010/03/css-ie8-meta-tag-to-disable.html - Kobi

这是另一次失败的尝试，使用display:table-cell - http://jsfiddle.net/uRKUn/ - Kobi

这必须是完全的 CSS/HTML 解决方案吗？还是可以使用 JS？ - Py.

如果图像比容器大（例如fiddle上中间按钮上的大勾号），我不得不说，如果没有javascript是不可能的。至少据我所知是这样。 - agmcleod

Answer 1

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

只需将img添加margin: -100px 0，因此负边距将消除任何大高度：

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

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

但是，如果您需要支持兼容模式或IE lt 8（因为某种原因），那么margin的方法将无法工作。因此，您需要额外的标记：http://jsfiddle.net/kizu/EFwgN/28/，但它有些hacky并且仅适用于固定按钮高度（例如在您的示例中）。

- kizu

---

IE8的兼容模式对我来说已经过时了，忘掉它吧 :)。另外，这个图片并不是完全居中，对我来说用-1px看起来更好，但这让我有些担心。不过还是挺有趣的！ - Kobi

根据字体的上升部分和下降部分进行居中，但在视觉上并不居中，所以是的，-1px或-2px可以修复视觉效果 :) - kizu

所以，如果你使用另一个 inline-block 代替纯文本，你会发现它是完美居中的：http://jsfiddle.net/kizu/EFwgN/36/。问题在于文本的垂直对齐，因此通过稍微移动图像来修复它是可以的。 - kizu

最后一个很不错！只需要再加一个像素：http://jsfiddle.net/kobi/EFwgN/38/ 从未见过这种使用负边距的方法。我会测试所有浏览器，看看它对我是否有效。到目前为止看起来不错。谢谢！ - Kobi

顶部和底部的负边距是一个不错的技巧。它在这里运行良好，并且在我测试过的所有浏览器中都表现良好。谢谢！ - Kobi

Answer 2

使用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，那么这里就是给那些码农的代码！ :)

- Itai Sagi

Answer 3

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

- shanethehat

---

谢谢这个建议。如果我想要重新调整图像大小，这是一个不错的选择，但在这里我更倾向于不这样做。 - Kobi

Answer 4

为什么不在图像确实比按钮更高的情况下使其缩小？

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

- ANeves

---

我宁愿不这样做 - 我有一些用透明像素填充的图像，我可以自由地隐藏它们。顺便说一句，这并不是坏事，但图像仍然没有在按钮的中心。 - Kobi

Answer 5

我可能错过了一些要求，因为将 span.Button 的高度设置为自动对我有用。

如果您想要的是按钮仅在水平方向上增长，垂直溢出被裁剪，则可能会这样做：

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来确定图片的高度，然后相应地将其居中。

- CodeVirtuoso

---

大图标被裁剪了，这没关系，但是文本和图标没有居中对齐：http://jsfiddle.net/uNDCL/ - Kobi

Answer 6

这个怎么样？

http://jsfiddle.net/92K8J/

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

- IOrlandoni

---

抱歉，但是固定高度是最重要的要求之一...我有一些填充了透明像素的图像，主要是因为我不想裁剪它们，原因如下：1. 这很无聊 2. 它们与其他 UI 元素共享，我不想复制它们。 - Kobi