使用.outerWidth()& .outerHeight()使用'resize'事件将子元素置于父元素的中心

时间:2017-01-20 12:36:50

标签: javascript jquery resize outerheight outerwidth

我正在尝试编写一些JavaScript代码,这些代码允许我使用填充将子元素置于其父元素中。然后使用相同的函数使用'resize'事件重新计算间距。在你开始问我为什么不用CSS做这个之前,这段代码只是一个大项目的一小部分。我已经简化了代码,因为代码的其余部分可以工作,只会混淆主题。

计算空间 - 这是计算子元素两侧使用的空间量的函数。

($outer.outerWidth() - $inner.outerWidth()) / 2;
($outer.outerHeight() - $inner.outerHeight()) / 2;

问题

虽然我已经成功地获得了带有保证金的预期结果。填充物给我带来了麻烦。

  1. 调整大小时似乎增加了外部元素的宽度
  2. 它没有完美地居中儿童元素(似乎有一个偏移)
  3. 内部元素在调整大小时会崩溃并变得不可见。
  4. 我意识到可能存在一些关于填充的基本原因导致我的问题,但是在经过大量的控制台日志并观察返回的数据后,我仍然无法解决问题。任何建议都会非常受欢迎。事实证明这根本不可行。

    HTML

     <div id="demo" class="outer">
      <div class="inner">
    
      </div>
    </div>
    

    CSS

    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    
    .outer {
      width:97%;
      height:400px;
      border:1px solid black;
      margin:20px;
    }
    
    .inner {
      width:40%;
      height:100px;
      background-color:grey;
    }
    

    JAVASCRIPT

    var $outer = $(".outer");
    var $inner = $(".inner");
    
    var getSpace = function(axis)  {
    
      if (axis.toLowerCase() == "x") {
    
        return ($outer.outerWidth() - $inner.outerWidth()) / 2;
    
      } else if (axis.toLowerCase() == "y") {
    
        return ($outer.outerHeight() - $inner.outerHeight()) / 2;
    
      }  
    
    }
    
    var renderStyle = function(spacingType) {
    
      var lateralSpace = getSpace("x");  
      var verticalSpace = getSpace("y");
    
      var $element;
    
      if (spacingType == "padding") {
          $element = $outer;
      } else if (spacingType == "margin") {
          $element = $inner;
        }
    
      $.each(["top", "right", "bottom", "left"], function(index, direction) {
        if (direction == "top" || direction == "bottom") {
          $element.css(spacingType + "-" + direction, verticalSpace);
        }
        else if (direction == "right" || direction == "left") {
          $element.css(spacingType + "-" + direction, lateralSpace);
        }                                     
      });                
    }; 
    
    var renderInit = function() {
    
      $(document).ready(function() {
    
        renderStyle("padding");
    
      });
    
      $(window).on("resize", function() {
    
        renderStyle("padding");
    
      });
    
    }
    
    renderInit();
    

    示例 - link

2 个答案:

答案 0 :(得分:1)

虽然我完全不同意这种水平居中元素的方法,但希望这会对你有所帮助。

小提琴:https://jsfiddle.net/0uxx2ujg/

JavaScript的:

var outer = $('.outer'), inner = $('.inner');
function centreThatDiv(){ 
    var requiredPadding = outer.outerWidth() / 2 - (inner.outerWidth() / 2);
    console.log(requiredPadding);
    outer.css('padding', '0 ' + requiredPadding + 'px').css('width','auto');
}

$(document).ready(function(){
    // fire on page load
    centreThatDiv();
});

$(window).resize(function(){
    // fire on window resize
    centreThatDiv();
});

HTML:

<div class="outer">
    <div class="inner">Centre me!</div>
</div>

CSS:

.outer{ width:80%; height:300px; margin:10%; background: tomato; }
.inner{ width:60px; height:60px; background:white; }

继续我不同意这种方法的原因 - 不应该使用JavaScript来解决问题。当然 - 它可以是,如果真的需要使用;但对于像元素居中那样简单的事情,它根本就没有必要。浏览器处理CSS元素本身的大小调整,因此通过使用JS,您可以为自己引入更多令人头痛的问题。

以下是一些如何在CSS中实现此目的的示例:

text-align:center&amp; display:inline-block https://jsfiddle.net/0uxx2ujg/1/

位置:绝对&amp; left:50%https://jsfiddle.net/0uxx2ujg/2/(这可以用于垂直居中,比水平更棘手)

答案 1 :(得分:0)

您可以创建新的CSS类来调整$ window.onresize = function(){上的元素大小            //添加你的代码         };