使用jQuery的垂直對齊元素（通用解決方案）

我正在嘗試爲元素的垂直對齊提供一個跨瀏覽器解決方案（它已被記錄了很多次，我不知道該歸入哪裏）。除了在元素包含圖片的情況下使用Chrome之外，它效果很好。這是因爲Chrome確定圖像的高度爲0，因爲它尚未加載它，但我相信。我如何修改下面的jQuery來解決這個問題？使用jQuery的垂直對齊元素（通用解決方案）

謝謝！

$(document).ready(function() { 
    $(".valign").vAlign(); 
}); 


(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) { 
      mh=0; 
     } 
     $(this).css('margin-top', mh); 
    }); 
    }; 
})(jQuery);

來源

2011-06-25 delphi

只需將$(document).ready()替換爲$(window).load()即可。它將不會執行，直到所有參考圖像加載。

來源

2011-06-25 03:09:28

您需要首先加載目標圖像並使用回調欺騙高度計算。所以：

...return this.each(function(i){ 
    $('targetImagePlaceholder').load('image/url.jpg', function(){ 
     var ah = $this.height(): 
     ...

應該爲你工作。

來源

2011-06-25 02:53:18 meteorainer

這有效，但不夠通用。我想在多種情況下使用它，並且我不需要知道圖像存儲在S3存儲桶中的鏈接。此外，有些情況下，我想要垂直對齊的元素內有多個imgs。不想每個人都進去。 – delphi

雅我注意到，我回答後，但首先想得到一個迴應，因爲無論如何你調用$（this），你可以使用$（this）.load做每一個，但我也必須問你是什麼加載你不知道的src。 – meteorainer

使用jQuery的垂直對齊元素（通用解決方案）

回答

相關問題