Javascript 在firefox中使用jQuery将div居中
因此,我尝试使用以下代码使用jQuery在窗口中居中放置一个div:Javascript 在firefox中使用jQuery将div居中,javascript,jquery,html,css,firefox,Javascript,Jquery,Html,Css,Firefox,因此,我尝试使用以下代码使用jQuery在窗口中居中放置一个div: (function($) { $.fn.extend({ center: function(options) { var options = $.extend({ // Default values inside: window, // element, center into window
(function($) {
$.fn.extend({
center: function(options) {
var options = $.extend({ // Default values
inside: window,
// element, center into window
transition: 0,
// millisecond, transition time
minX: 0,
// pixel, minimum left element value
minY: 0,
// pixel, minimum top element value
withScrolling: true,
// booleen, take care of the scrollbar (scrollTop)
vertical: true,
// booleen, center vertical
horizontal: true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {
position: 'absolute'
};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {
top: top + 'px'
});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {
left: left + 'px'
});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);
这在Chrome中运行良好,但在firefox中它似乎没有垂直居中,我不知道我做错了什么。firefox是否存在导致无法计算窗口高度的错误?尝试以下方法:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
用法:
$(element).center();
我记不起我改变了什么,但这里是:
$.fn.extend({
center: function(options) {
var options = $.extend({ // Default values
inside: window,
// element, center into window
transition: 0,
// millisecond, transition time
minX: 0,
// pixel, minimum left element value
minY: 0,
// pixel, minimum top element value
withScrolling: true,
// booleen, take care of the scrollbar (scrollTop)
vertical: true,
// booleen, center vertical
horizontal: true // booleen, center horizontal
}, options);
$(this).each(function() {
var props = {
position: 'absolute'
};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {
top: top + 'px'
});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {
left: left + 'px'
});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
});
return $(this);
}
});
它在firefox中似乎运行良好:您是否尝试过添加诸如
marginleft:auto代码>和右边距:自动代码>到元素?例如:
我会,但我使用脚本在不同的情况下将许多不同的元素集中,基于CSS的解决方案并不总是实用的。此外,每当用户调整窗口大小时,我都希望重新居中。我也看到了此解决方案的可能副本,但它与firefox有相同的问题。@Thomas我自己在chrome、ie和ff中都使用过此解决方案,并且它按预期工作。你能提供一些html+css不起作用的例子吗?你应该这样做:$(element.center();然后将调整大小处理程序添加到您的窗口:$(窗口).resize(函数(){$(元素).center();});我有一些(我告诉你,一个丑陋的设计示例),但你可能会在js代码中找到一些东西: