如何在窗口调整大小时使用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？

回答

相关问题