将 .outerWidth() 和 .outerHeight() 与 'resize' 事件一起使用，使子元素在父元素中居中

Question

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

计算 space - 这是计算要在子元素两侧使用的 space 数量的函数。

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

问题

虽然我已经成功地获得了想要的结果。填充给我带来了问题。

调整大小时似乎增加了外部元素的宽度
它没有完美地居中子元素（似乎有偏移）
内部元素在调整大小时折叠并变得不可见。

我意识到可能有一些关于填充的基本原理导致了我的问题，但是在大量的控制台日志和观察返回的数据之后我仍然无法解决这个问题。任何建议都将非常受欢迎。事实证明，这根本行不通。

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

Answer 1

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

Answer 2

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

Fiddle: 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 & display:inline-block https://jsfiddle.net/0uxx2ujg/1/

position:absolute & left:50% https://jsfiddle.net/0uxx2ujg/2/（这也可以用于垂直居中，这比水平居中更棘手）

将 .outerWidth() 和 .outerHeight() 与 'resize' 事件一起使用，使子元素在父元素中居中

Using .outerWidth() & .outerHeight() with the 'resize' event to center a child element in parent

javascript

jquery

resize

outerwidth

outerheight