如何在窗口調整大小時使用jquery水平居中關聯div？

我正在初步定心格水平使用jQuery，但是當窗口大小，它看起來糟糕，所以我想要做的就是保持居中使用jQuery的窗口大小如何在窗口調整大小時使用jquery水平居中關聯div？

後有沒有辦法幫助我們嗎？

編輯

傢伙，我已經成功了其他要素爲中心，但現在我有另外一個問題:(

請檢查該 http://hrmanagementbradford.com/gallery/

和調整窗口的大小，你會看到，內容沒有得到正確的定位，我試圖修復這個小時，但找不到解決方案，請幫助那

編輯解決！它是複雜的，我的代碼是非常具體的發佈使這裏不會幫助:) 和雖然我使用jQuery來居中，但如果我們使用的CSS的事情，然後FutureKode的回答是最適合我:)

來源

2011-04-15 shaheer

爲什麼不把DIV與CSS集中在一起（`width：XXXpx;保證金：汽車;`）？ – 2011-04-15 15:16:50

你能發佈你的代碼嗎？我不知道你爲什麼在jQuery而不是CSS中這樣做... – Town 2011-04-15 15:16:54

你可以在我發佈的鏈接上看到代碼 – shaheer 2011-04-15 19:09:13

，它會留在中心當瀏覽器大小：

div { 
margin:0 auto; 
width:800px 
}

來源

2011-04-15 15:17:38

設置`position：fixed`或者至少`absolute`也是明智的做法。無論如何，這個中心都會在中心。 – 2011-04-15 15:20:09

做到這一點：你爲什麼要使用jQuery水平居中時，CSS可以做一個行

$(window).resize(function(){ 

    // reposition div again here 

})

來源

2011-04-15 15:17:09 Neal

您可以使用

margin: 0 auto;

在CSS中水平居中塊元素。

像這樣：

div 
{ 
    width: 400px; 
    margin: 0 auto; 
}

來源

2011-04-15 15:17:41 Town

你可以把它死的心是這樣的：

$('#elementID').css({ 
    position:'absolute', 
    top:'50%', 
    left:'50%', 
    width:'600px',     // adjust width 
    height:'300px',    // adjust height 
    zIndex:1000, 
    marginTop:'-150px'    // half of height 
    marginLeft:'-300px'   // half of width 
});

注意元素將出現在該中心但滾動它不會移動。如果您想讓它出現在中心位置，則需要將position設置爲fixed。但是，這在IE6中不起作用。所以決定是你的:)

您還可以創建快捷簡單的jQuery插件：

(function($){ 
    $.fn.centerIt = function(settings){ 

     var opts = $.extend({}, $.fn.centerIt.defaults, settings); 

     return this.each(function(settings){ 
      var options = $.extend({}, opts, $(this).data()); 
      var $this = $(this); 

      $this.css({ 
      position:options.position, 
      top:'50%', 
      left:'50%', 
      width:options.width,     // adjust width 
      height:options.height,    // adjust height 
      zIndex:1000, 
      marginTop:parseInt((options.height/2), 10) + 'px' // half of height 
      marginLeft:parseInt((options.width/2), 10) + 'px' // half of height 
      }); 

     }); 
    } 

    // plugin defaults - added as a property on our plugin function 
    $.fn.centerIt.defaults = { 
     width: '600px', 
     height: '600px', 
     position:'absolute' 
    } 

})(jQuery);

並在以後使用它像：

$('#elementId').centerIt({width:'400px', height:'200px'});

要居中時調整窗口，你可以使用resize事件，以防萬一它不是這樣的中心：

$(window).resize(function(){ 
    $('#elementId').centerIt({width:'400px', height:'200px'}); 
});

來源

2011-04-15 15:20:17 Sarfraz

如何在窗口調整大小時使用jquery水平居中關聯div？

回答

相關問題