0

目前我有一个小项目，它是一个响应式网站（使用骨架响应式网格），我正在使用 jQuery 在视口中垂直居中内容。

<script>
$(document).ready(function(){                  
 $(window).resize(function(){
  $('.container').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.container').outerWidth())/2,
   top: ($(window).height() 
     - $('.container').outerHeight())/2
 });    
 });
 // To initially run the function:
 $(window).resize(); 
});
</script>

问题是当视口变得小于容器的外部宽度时，它仍然应用绝对位置。

理想情况下，我需要一些说明

如果视口等于或小于 .container 的外部宽度，则不应用任何定位，但是如果视口大于 .container 应用绝对定位以使其在视口中居中？

有谁知道如何使用 Jquery 来实现这一点，就像我挠头一样？

编辑>>>>>

这样的事情是对的吗，我在这里有点抓着稻草.....

$(document).ready(function(){
$(window).width();   // returns width of browser viewport
 $(document).width(); // returns width of HTML document

$(window).height();   // returns heightof browser viewport
$(document).height(); // returns height of HTML document

var width = $(window).width(); 
var height = $(window).height(); 

   if ((width >= 1024  ) && (height>=768)) {
 $(window).resize(function(){
  $('.container').css({
  position:'absolute',
  left: ($(window).width() 
 - $('.container').outerWidth())/2,
 top: ($(window).height() 
 - $('.container').outerHeight())/2
 });    
 });
 // To initially run the function:
 $(window).resize(); 
}
else {
//do nothing
}
});
4

2 回答 2

1

使用 $(window).width(); // returns width of browser viewport 或 $(document).width(); // returns width of HTML document 应该与$('.container').width()

if (width comparison) apply_formatting

于 2013-02-22T13:53:11.627 回答
1 
<script>
 $(document).ready(function(){                  
     $(window).resize(function(){
          // Here is the new part:
          if(($(window).width() > $('.container').outerWidth()) && ($(window).height() > $('.container').outerHeight()) ){
             $('.container').css({
                  position:'absolute',
                  left: ($(window).width() 
                     - $('.container').outerWidth())/2,
                  top: ($(window).height() 
                     - $('.container').outerHeight())/2
             });
          }else{
             $('.container').css({position:'relative'});
          }    

     });
     // To initially run the function:
     $(window).resize(); 
 });
</script>

希望能帮助到你。这个想法是，当容器的宽度和高度都小于窗口视口时，将应用绝对定位，否则将应用相对（正常）定位。

于 2013-02-22T14:26:36.630 回答