Question

我正在尝试以网格类型格式动态对齐图像中心。每个图像都是从CDN动态加载的，其最大高度和最大宽度为.thumbnail img。容器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);

使用JQuery动态对齐图像中心

1 个答案: