Question

目前我有一个小型项目，它是一个响应式网站（使用Skeleton响应网格）我正在使用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的外部宽度，则不应用任何定位，但是如果视口大于.container，则应用绝对定位将其置于视口中心？。

有人知道如何用Jquery实现这一点，因为我正在摸不着头脑。

编辑＆gt;＆gt;＆gt;＆gt;＆gt;

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

$(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
}
});

Answer 1

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

一起使用

if (width comparison) apply_formatting

Answer 2

<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>

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

垂直居中内容，除非更大

2 个答案: