使用 JQuery 动态对齐图像中心

Question

我正在尝试以网格类型格式动态对齐图像中心。每个图像都是从具有.thumbnail img 的最大高度和最大宽度的 CDN 动态加载的。容器 div 的宽度和高度是固定的。

#storeItems .thumbnail {
border:1px solid #637678;
width:136px;
height:151px;
padding:1px;
position:relative;
margin:0 auto;
display:block;
overflow:hidden;
}
#storeItems .thumbnail img {
max-width:130px;
max-height:130px;
display:block;
position:relative;
}

我创建的 JavaScript 可以在 IE8+、Chrome、Opera、Safari 和 Firefox 中正确对齐图像。但是，我的问题出现在 IE8+、Opera 和 Firefox 中，当您第一次加载页面时它不会对齐，直到您刷新页面。一旦页面被缓存，它就会保持对齐。这似乎只是在没有缓存页面的初始页面加载之后。

(function($) {
$("#storeItems .thumbnail").each(function(i){
    var img = $(this).find('img');

    var y = $(this).height(),
        x = $(this).width();
    /**
     * WebKit browsers which incorrectly calculates margin
     */
    if($.browser.webkit) {
        $(this).css({
            'display': 'table-cell',
            'vertical-align': 'middle',
            'text-align': 'center'
        });
        img.css({
            'margin': 'auto auto'
        });
    }
    else {
        img.css({
            'margin-top': ((y-img.height())/2)+'px',
            'margin-left': ((x-img.width())/2)+'px'
        });
    }
});
})(jQuery);

我在页面底部加载了 JavaScript。我尝试将其加载到标题中。我还在标题和底部都使用了$(document).ready();；尝试后它根本没有对齐。有什么我想念的吗？似乎在第一次运行时这些浏览器中不会发生计算。有什么想法吗？

Answer 1

这样做：

(function($) {
    $(document).ready(function() {
        $("#storeItems .thumbnail").each(function(i){
            var img = $(this).find('img');

            var y = $(this).height(),
                x = $(this).width();
            /**
             * WebKit browsers which incorrectly calculates margin
             */
            if($.browser.webkit) {
                $(this).css({
                    'display': 'table-cell',
                    'vertical-align': 'middle',
                    'text-align': 'center'
                });
                img.css({
                    'margin': 'auto auto'
                });
            }
            else {
                img.css({
                    'margin-top': ((y-img.height())/2)+'px',
                    'margin-left': ((x-img.width())/2)+'px'
                });
            }
        });
    });
})(jQuery);