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

我有一个简单的HTML按钮，其中包含文本和图像：如何垂直对齐未知大小的图像到div的中心？

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
（注意小图标略低于中心的按钮）

来源

2011-08-29 Kobi

我知道有无数的重复，但我可以得到任何工作以及... – Kobi

好吧，它已开启。 *（至少）* ** 150 **良好的解决方案的奖励货币声誉，额外** 50 **如果解决方案支持IE8兼容模式。 – Kobi

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

一个简单的解决方案，如果你需要不超过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 8 LT（出于某种原因）的支持，以保证金的事情将无法正常工作。所以你需要一个额外的标记：http://jsfiddle.net/kizu/EFwgN/28/，但它有点冒险，只适用于固定按钮的高度（如你的例子）。

来源

2011-08-31 12:20:31 kizu

IE8兼容模式对我来说已经死了。忘记它'：）'。此外，图像不是*精确*居中，使用'-1px'看起来更好，对我来说，这让我很担心。虽然有趣！ – Kobi

它根据字体的上行和下行而居中，但不是在视觉上，所以是，'-1px'或'-2px'会修复视觉部分:) – kizu

所以如果你使用另一个内嵌块而不是文本，你会发现它完全居中：http://jsfiddle.net/kizu/EFwgN/36/问题在于文本的垂直对齐，所以可以通过移动图像来修复它。 – kizu

为什么不使图像收缩的情况下，它确实比按钮更高？

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

来源

2011-08-29 10:27:09 ANeves

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

我可能错过了一些要求，如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代码来确定IMG高度，然后居中因此。

来源

2011-08-29 10:27:40 CodeVirtuoso

大图标被裁剪，可以，但文本和图标不居中：http://jsfiddle.net/uNDCL/ – Kobi

使用基于表格的显示。由于display:table-cell;和height:24px之间的冲突而需要缩小图像。很类似的评论你的努力失败，但包括在图像上所需要的display:block;：http://jsfiddle.net/shanethehat/5ck3s/

来源

2011-08-31 11:53:54 shanethehat

感谢您的支持。如果我想重新调整图像，这是一个很好的选择，但是在这里我不喜欢。 – Kobi

你去那里，使用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，以及，这里是代码gulfers在那里！:)

来源

2011-08-31 12:09:16

这个怎么样？

http://jsfiddle.net/92K8J/

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

来源

2011-08-31 12:28:33

对不起，固定高度是最重要的要求之一......我有一些用透明像素填充的图像，而且我不想裁剪它们，因为1.它很无聊2.它们与其他UI元素共享，我不想复制它们。 – Kobi

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

回答

相关问题