將元素直接置於屏幕中央。 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

回答

相關問題