使用jQuery在一個div中垂直居中圖像

我一直在試圖在一個div內垂直居中放置一個圖像，如果圖像的高度一致，我可以使用CSS。然而（一如既往）事情並不那麼簡單，幾乎每個實例的圖像高度都不相同。

我希望能夠將一半的圖像高度的負邊距添加到圖像中，以將其拉到div的中心。

我如何做到這一點的任何建議？

這似乎並不奏效：提前š

var $img = $('div#imageColumn img'); 
var h = $img.height(); 
$img.css('margin-top', + h/-2 + "px");

感謝。

來源

2012-07-17 V Neal

你嘗試過這麼遠嗎？如果您向我們顯示您當前的代碼，我們可能會幫助您更好地指導您。 – MrOBrian 2012-07-17 17:10:42

你真的需要用jQuery來做到這一點嗎？檢查了這一點：http://phrogz.net/css/vertical-align/index.html – 2012-07-17 17:13:35

嗨蒂姆 - 圖像大小是動態的，所以我需要使用jquery獲取高度，然後應用負邊距。我不認爲CSS可以做到這一點？ – 2012-07-17 17:24:33

此代碼在前一段時間被發現。您可以這樣使用它

$(".yourclass").vAlign();

它計算父元素的高度並相應地居中它。

功能：

(function ($) { 
    // VERTICALLY ALIGN FUNCTION 
    $.fn.vAlign = function() { 
     return this.each(function (i) { 
      var ah = $(this).height(); 
      var ph = $(this).parent().height(); 
      var mh = Math.ceil((ph - ah)/2); 
      if (mh > 0) { 
       $(this).css('margin-top', mh); 
      } else { 
       $(this).css('margin-top', 0); 
      } 
     }); 
    }; 
})(jQuery);

來源

2012-07-17 17:12:57

喲不需要jQuery的它，CSS可以做到這一點。只需設置你的形象是：

.yourDiv .yourImg{ 
    display: inline-block; 
    vertical-align: middle; 
    /* if you wonder for a maximum height just add */ 
    max-height: 200px; 
}

此外，如果你想知道一個黑客以支持IE7 inline-block的有你有： http://www.kollerat.com/cms/index.php/Web-admin/HTML/IE7-and-inline-block.html

來源

2012-07-17 17:33:08

我需要一個跨瀏覽器的解決方案。不幸的是，這似乎只適用於Firefox。 – 2012-07-17 17:37:15

它適用於FF，Chrome和IE8（或更高版本）如果你想支持IE7我粘貼了一個鏈接，解釋你如何做到這一點。 – 2012-07-17 17:40:42

謝謝 - 但這仍然是行不通的... #imageColumn img { \t max-width：445px; \t max-height：333px; \t display：inline-block; \t vertical-align：middle; \t} – 2012-07-18 07:55:16

使用jQuery在一個div中垂直居中圖像

回答

相關問題