将元素直接置于屏幕*。 jQuery
答
要居中的蓝色方块,它的位置必须设置为position:absolute;
如果你的蓝盒子是动态变化的大小,你必须使用JavaScript来居中。
下面是一个简单的例子:
$('#color')
.css('top','50%')
.css('left','50%')
.css('margin-left','-'+($('#color').outerWidth()/2)+'px')
.css('margin-top','-'+($('#color').outerHeight()/2)+'px');
确保它停留在浏览器中调整大小中心:
$(document).bind('resize', function(){
$('#color')
.css('top','50%')
.css('left','50%')
.css('margin-left','-'+($('#color').outerWidth()/2)+'px')
.css('margin-top','-'+($('#color').outerHeight()/2)+'px');
});
它可能会来包装中心的代码放到一个函数调用一个好主意它只要蓝色框的大小发生变化。
下面是编辑的jsfiddle:
答
基础在CSS中元件:
- 做一个容器的元素,并把它放在
body
水平(以中心在屏幕的中间) - 在容器上设置
position: relative
- 集
position: absolute
的元件 - 添加固定
width
和height
到元件 - 元件
- 设置
margin-left
和margin-top
至负半上设置top: 50%
和left: 50%
上width
和height
分别
同样的逻辑适用于jQuery,只有你可以动态计算维度和边距。
+0
我知道css。我相信这个问题指定使用jQuery。 – 2013-03-01 00:37:06
+3
同样的逻辑适用于jQuery。 – elclanrs 2013-03-01 00:37:43
你尝试过什么?这个JSFiddle与你之前的问题有关......看起来你让我们一点一点地构建你的项目。 – ahren 2013-03-01 00:34:51
似乎你得到了“在问题中发布一些代码而不是链接到JSFiddle”的消息,在这种情况下,你应该发布与问题相关的代码而不是随机标签。 – 2013-03-01 00:35:54
请在查询之前查询!!! http://bit.ly/XdUUjs – 2013-03-01 00:41:21