如何垂直對齊未知大小的圖像到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的中心？

回答

相關問題