0

嗨，请看一下我的网站，有问题的代码片段我必须将我的图像居中，因为我对 css-html 方法从来没有任何运气。有时它会加载居中，有时它不会，请告诉我如何在页面加载时将图像居中。

网站：http ://bit.ly/11nAQJK

<script type="text/javascript"> //Centering Script


$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});


function updateContainer() {


(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px"); 
    $(this).css("top", "50%");
    $(this).css("position", "absolute");    
    }); 
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
    return this.each(function(i){
    var w = $(this).width();
    var ow = $(this).outerWidth();  
    var ml = (w + (ow - w)) / 2;    
    $(this).css("margin-left", "-" + ml + "px");
    $(this).css("left", "50%");
    $(this).css("position", "absolute");
    });
};
})(jQuery);
4

3 回答 3

0

为此，您有许多变体。在您的情况下，您可以这样做

<div style="
  background: url('Assets/OrderSheet.png') center center no-repeat;
  width: 100%;
  height: 500px;
 ">
    <a href="Assets/OrderSheet.xls"> 
    </a>
 </div>
于 2013-06-07T06:17:00.583 回答
0

我会为此使用 CSS 而不是 JavaScript，但那是另一个故事。我想回答你的问题。pageLoad 会比 .ready 更好

于 2013-06-07T06:18:38.377 回答
0

您正在使用$(document).ready()，因此该功能在DOM准备就绪时执行，但不一定所有图像等都已加载，因此高度和宽度信息尚不可用，当您刷新页面时，该信息可用并且您获得所需行为。

要克服这个问题，请使用$(window).load(), 以便在页面上的所有内容完全加载时执行该函数，并且宽度和高度等信息可用，并且您应该在第一次加载页面时得到预期的结果。

或者，如果您需要继续使用$(document).ready()，则需要明确指定图像等元素的尺寸，以便在DOM加载时浏览器已经知道尺寸并且不必等待图像等元素完全加载。

于 2013-06-07T06:20:07.630 回答