使用 jQuery 垂直对齐 Div 设置 margin-top

发布于 2024-08-22 05:19:26 字数 750 浏览 5 评论 0原文

谁能告诉我哪里出错了...我正在使用以下内容通过设置 margin-top 来垂直对齐 div，使用 (window).height。 625 是居中的 Div 的高度...

这在 Firefox 中有效，但 IE7 不会设置 margin-top，直到您调整浏览器窗口的大小。

任何想法将不胜感激！

马丁

jQuery.noConflict();
jQuery(document).ready(function () {

jQuery(function(){   
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});   
}
});

jQuery(window).resize(function(){
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});
}
});

});

原文

Can anyone tell me where I am going wrong... I am using the following to vertically align a div by setting the margin-top, using the (window).height. 625 is the height of the Div being centered...

This works in Firefox but IE7 doesn't set the margin-top until you resize the browser window.

The test site is at http://guylloyd.co.uk

Any thought would be amazingly appreciated!

Martin

jQuery.noConflict();
jQuery(document).ready(function () {

jQuery(function(){   
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});   
}
});

jQuery(window).resize(function(){
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});
}
});

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪推晚风 2024-08-29 05:19:26

你真的不需要使用 jquery 以这种方式布局内容，简单的 css 和 xhtml 可以实现同样的效果。

这可能是与 IE6 中相同的问题，导致 javascript 执行延迟，尝试包括超时和对 Seth 设计的代码的调用

function doResize() {   
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');   
    if(jQuery(window).height() > 625){   
        jQuery('body').css({'margin-top': $marginTop});   
    }   
}  
//when document has been fully loaded
jQuery(document).ready(function()
{
    setTimeout('doResize()', 1 );

});

You really dont need to use jquery to lay out the content in that fashion, simple css and xhtml could achieve the same thing.

It could be an issue the same as in IE6 which causes a delay in the javascript to be executed try including a time out and a call to the code Seth has designed

function doResize() {   
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');   
    if(jQuery(window).height() > 625){   
        jQuery('body').css({'margin-top': $marginTop});   
    }   
}  
//when document has been fully loaded
jQuery(document).ready(function()
{
    setTimeout('doResize()', 1 );

});

回复收藏 0 原文

疾风者 2024-08-29 05:19:26

我不确定你的实际问题，这就是为什么 IE7 在调整窗口大小之前不会设置边距，但你可能会考虑减少这样的冗余代码：

function doResize() {
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
    if(jQuery(window).height() > 625){
        jQuery('body').css({'margin-top': $marginTop});
    }
}

jQuery.noConflict();
jQuery(document).ready(doResize);
jQuery(window).resize(doResize);

对于 IE，如果向方法，以便您可以知道它们何时被调用。难道IE7没有执行document.ready函数？或者它正在执行，但什么也没做？

I'm not sure about your actual question, which is why IE7 isn't setting the margin until you resize the window, but you might consider reducing redundant code like this:

function doResize() {
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
    if(jQuery(window).height() > 625){
        jQuery('body').css({'margin-top': $marginTop});
    }
}

jQuery.noConflict();
jQuery(document).ready(doResize);
jQuery(window).resize(doResize);

As for IE, what happens if you add some alert statements to the method so you can tell when they are called. Is IE7 not executing the document.ready function? Or is it executing, but not doing anything?

回复收藏 0 原文

~没有更多了~