使用 jQuery 垂直对齐元素（通用解决方案）答案

【问题标题】：Vertical align elements (universal solution) with jQuery使用 jQuery 垂直对齐元素（通用解决方案）
【发布时间】：2011-06-25 11:09:28
【问题描述】：

我正在尝试为元素的垂直对齐提供一个跨浏览器解决方案（它已被记录很多次，以至于我不确定将其归因于何处）。除了在元素包含图像的情况下使用 Chrome 时，它的效果很好。这是因为 Chrome 确定图像的高度为 0，因为我相信它还没有加载它。如何修改下面的 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);

【问题讨论】：

标签： jquery image vertical-alignment

【解决方案1】：

只需将您的$(document).ready() 替换为$(window).load()。在所有引用的图像加载之前，它不会执行。

【讨论】：

【解决方案2】：

您需要先加载目标图像并使用回调来欺骗高度计算。所以：

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

应该为你工作。

【讨论】：

这可行，但不够通用。我想在多种情况下使用它，而且我不需要知道存储图像的 S3 存储桶的链接是什么。此外，在某些情况下，我想要垂直对齐的元素内部有多个 img。不想每个人都进去。
是的，我注意到在我回答之后，但想先得到回复，因为你无论如何都在调用 $(this)，你可以使用 $(this).load 来做每一个，但我还必须询问您正在加载的内容是您不知道 src 的。