使用 jQuery 垂直对齐元素（通用解决方案）
我正在尝试为元素的垂直对齐提供跨浏览器解决方案（它已被记录多次，我不确定将其归属于何处）。它工作得很好，除非使用 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);
I am attempting to have a cross browser solution for vertical alignment of an element (it has been documented so many times that I'm not sure where to attribute it). It works great except for when using Chrome where the element contains an image. This is because Chrome determines the height of the image is 0 because it hasn't loaded it yet I believe. How do I modify the below jQuery to fix this?
Thanks!
$(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);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
只需将
$(document).ready()替换为$(window).load()即可。在加载所有引用的图像之前它不会执行。Just replace your
$(document).ready()with$(window).load(). It won't execute until all the referenced images load.您需要首先加载目标图像并使用回调来欺骗高度计算。所以：
应该为你工作。
You need to load the targeted image first and use the callback to trick the height calc. So:
Should work for ya.