自动对齐脚本在页面加载时未对齐但在刷新时未对齐？答案

【问题标题】：Auto-Align Script misaligns on page load but not on refresh?自动对齐脚本在页面加载时未对齐但在刷新时未对齐？
【发布时间】：2013-06-03 08:25:54
【问题描述】：

您好，请看一下我的网站，有问题的代码 sn-p 我必须将图像居中，因为我从来没有使用 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);

【问题讨论】：

StackOverflow 的重点在于它旨在成为一个问答社区。一旦您对您的问题有了答案，建议将其留给其他人用作基础（尽可能），不要删除它或用胡言乱语替换它。

标签： javascript jquery html css centering

【解决方案1】：

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

<div style="
  background: url('Assets/OrderSheet.png') center center no-repeat;
  width: 100%;
  height: 500px;
 ">
    <a href="Assets/OrderSheet.xls"> 
    </a>
 </div>

【讨论】：

我试过这个并且它有效，但是我如何为比特币按钮（实际上是一个表单）做到这一点？
将此css添加到您的imgs #img{ margin: 0 auto; display:block; }
如果你在 div、form 等处使用它，那么你需要为你的元素添加一个宽度选项。即#orderbutton > form { width:190px; margin: 0 auto; display:block;} #orderbutton{width:100%;}
这不会随着页面缩小，图像保持相同的宽度。

【解决方案2】：

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

【讨论】：

我试过了，但它破坏了脚本 $(window).load(function () { updateContainer(); $(window).resize(function() { updateContainer(); }); } );

【解决方案3】：

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

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

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

【讨论】：

感谢您的建议，但这破坏了脚本！现在所有的图像都是左向的。
至于指定尺寸，如果它们都有不同的尺寸，我该怎么做？
确保它是 $(window).load() 而不是错误的 $(document).load() （一个常见的错误）。对于尺寸，您可以为图像分配 id 并在 css 中指定尺寸或使用内联图像高度和宽度，但不建议使用内联尺寸定义或样式。