用jQuery居中浮动div

我刚刚继承了一些代码，部分代码显示浮动div并居中。用jQuery居中浮动div

下面是代码：

function showFloatingDialog(element) { 
    removeMessage(); 
    var height, width; 
    var offsetY = $(document).scrollTop(); 

    if (offsetY == undefined) { 
    offsetY = 0; 
    } 

    var dialog = $('#' + element); 

    dialog.show(); 

    height = (($(window).width() - dialog.width())/2); 
    width = ($(window).height() - dialog.height())/2; 
    width = width + offsetY; 

    height = height - 195; 
    width = width - 130; 

    dialog.css('position', 'absolute'); 
    dialog.css('left', height + 'px'); 
    dialog.css('top', width + 'px'); 
}

在它的防御，它完美的作品，但我下面的线条看起来像一个黑客：

width = width + offsetY; 

    height = height - 195; 
    width = width - 130;

有没有得到更好的和更合适的方法与此相同的结果。

来源

2011-08-09 dagda1

的问题似乎有非常多的代码做了我认为是比较简单的。现场示例：http://jsfiddle.net/LHSDU/1/

var width = ($(window).width() - dialog.width())/2; 
var height = ($(window).height() - dialog.height())/2; 

dialog.css({'position' : 'absolute' , 'left' : width + 'px', 'top' : height + 'px'});

来源

2011-08-09 15:00:56 tw16

这是一个坚实而干净的方法。此外，它不经意地解决了垂直对齐/显示：表格单元故障。 –

我想象那些减法是采取元素的宽度和高度的一半被居中。为了达到这个目的，你只需要用要放置的元素的宽度和高度的一半来替换它即可。

height = (($(window).width() - (dialog.width()/2))/2); 
width = ($(window).height() - (dialog.height()/2))/2;

然后，你不需要从整体高度和宽度中减去任何东西。

来源

2011-08-09 13:29:03 Alex

打倒我吧，这似乎是正确的。中心有很多种方式，这只是其中之一。 – Henry

将div放在页面的右下角。 – dagda1

很难说，没有一个例子，并知道您使用的div的大小，但使用此修复程序，您不应该在初始分配后需要减法。 – Henry

有很多方法来居中一个浮动div，你给出的例子可能不是最好的方式，但它类似于你可以在纯CSS中执行它的方式之一。

这是一个很好的链接，它有一点点的信息。 http://blog.themeforest.net/tutorials/vertical-centering-with-css/

使用

margin-left:auto; 
margin-right:auto;

将水平设置它为中心

来源

2011-08-09 13:34:00 Henry

，你不需要替代品。但是这可能会导致一个问题，因为你不能点击叠加层边上的页面底层部分。除此之外，他必须使用JavaScript，以垂直方向居中div。 – GNi33

我明白了你的观点，但你不必使用javascript来垂直居中，这也可以通过CSS完成。这完全取决于你的方法。我发布的链接有点被称为“垂直居中与CSS” – Henry

哦，我的坏。没有在您的链接中看到“垂直”，对此抱歉！我并不知道其中的一些技巧，所以感谢您的链接。有一件事我很好奇，当窗口重新调整大小时，它们仍然能够正确定位？ – GNi33

用jQuery居中浮动div

回答

相关问题