使用jQuery的可变宽度的中心对象

需要将宽度根据浏览器窗口更改的对象居中。 通常我会使用css，其顶部和左侧位置设置为50％，负边距等于宽度和高度的一半，但显然不能满足此需求。

我以为我的jQueryfunction会起作用……但没有bueno。 我错过了CSS中的东西吗？

谢谢！

http://jsfiddle.net/danielredwood/EbkLg/2/

这是CSS

#t { width:25%; height:25%; background:red; } 

JavaScript的

 $(window).resize(function(){ resizenow(); }); function resizenow() { var browserwidth = $(window).width(); var browserheight = $(window).height(); $('#t').css('left', (browserwidth - $(this).width())/2).css('top', (browserheight - $(this).height())/2); }); 

Answer 1

在你链接到你的JSFiddle中使用$(this).width() ：

 $('#t').css('left', ((browserwidth - $(this).width())/2)) .css('top', ((browserheight - $(this).height())/2)); 

但是当调用函数resizenow（）时， this == window 。 如果用$("#t")替换$(this)它可以正常工作，正如这个JSFiddle所示： http ： //jsfiddle.net/jackfranklin/F2tR3/1/

在jQuery的css()函数中， this的值未设置为您正在更改其样式的元素，因此原始代码无效的原因。

Answer 2

像这样的东西？

  $(document).ready(function(){ var browserwidth = $(window).width(); var browserheight = $(window).height(); var x=browserwidth/4; $('#t').css({'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); $(window).resize(function(){ var browserwidth = $(window).width(); var x=browserwidth/4; var browserheight = $(window).height(); $('#t').css({'width' : x, 'height' : x, 'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); }); #t { width: 500px; height: 500px; position: relative; background:red; } }); 

或者如果你不想让它成为正方形，只是不要在jquery中设置宽度和高度，在css中使用百分比。

Answer 3

这是为您尝试设置的左侧和顶部值解析值的方式。 如果你像这样打破它们，它的工作原理：

 var widthDelta = $(window).width() - $('#t').width(); var heightDelta = $(window).height() - $('#t').height(); $('#t').css('left', widthDelta / 2).css('top', heightDelta / 2); 

我还没有准确分析出现了什么问题 – 我只是寻找一些先行的东西 – 我将不得不仔细研究它，看看具体问题是什么。

Answer 4

jQuery width()和height()根据jQuery文档返回无单位像素值。

但是当你把它重新插入到jQuery的css()的计算中时，你需要添加单位标签“px”。

---

编辑：

如果您的计算基于百分比，那么一切都是错误的，因为width()和height()是像素值。 无论哪种方式，你仍然需要在jQuery的css()添加单位，’px’或’％’。

---

EDIT2：

css()显然默认使用像素，但如果OP使用百分比，则需要'%' 。

Answer 5

这将使红色div水平居中，并且它的宽度和高度将根据浏览器窗口大小进行动态改变;

现在垂直居中是一个更复杂的故事……

Answer 6

尝试添加位置：固定到您的CSS。 这意味着您为元素指定的任何定位都将与实际窗口而不是文档有关。

不确定这是否会解决它，但它应该。