将元素直接置于屏幕中央。 jQuery

-5

只是想使用jquery将蓝框直接放置在屏幕的中心。将元素直接置于屏幕中央。 jQuery

<html>

来源

2013-03-01 Josue Espinosa

你尝试过什么？这个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

要居中的蓝色方块，它的位置必须设置为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：

http://jsfiddle.net/mdkpS/

来源

2013-03-01 00:42:53 AlexCheuk

基础在CSS中元件：

做一个容器的元素，并把它放在body水平（以中心在屏幕的中间）
在容器上设置position: relative
集position: absolute的元件
添加固定width和height到元件
元件
设置margin-left和margin-top至负半上设置top: 50%和left: 50%上width和height分别

同样的逻辑适用于jQuery，只有你可以动态计算维度和边距。

来源

2013-03-01 00:35:45 elclanrs

我知道css。我相信这个问题指定使用jQuery。 – 2013-03-01 00:37:06

同样的逻辑适用于jQuery。 – elclanrs 2013-03-01 00:37:43

将元素直接置于屏幕中央。 jQuery

回答

相关问题