Question

我试图通过计算父元素和子元素的宽度和高度的差异以及使用差异作为边距或填充来横向和纵向在其父元素中居中元素。

我正在使用这个公式计算必要的空间：

($outerElement.outerWidth() - $innerElement.outerWidth() / 2;
($outerElement.outerHeight() - $innerElement.outerHeight() / 2;

然后我使用一个函数循环遍历方向数组，该函数允许我使用函数参数更改应用于子元素的css。基本上该功能允许我选择是否要使用边距或填充。

问题

虽然我的代码返回了top，right，left和bottom的预期值，但是使用padding却没有这样做？知道是什么导致了这个吗？

HTML

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

  </div>
</div>

CSS

    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

.outer {
      width:500px;
      height:200px;
      border:1px solid black;
      margin:20px;
    }

    .inner {
      width:100px;
      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) {

  $.each(["top", "right", "bottom", "left"], function(index, direction) {

    if (direction == "top" || direction == "bottom") {

      $inner.css(spacingType + "-" + direction, getSpace("y"));

      console.log(getSpace("y"));

    } else if (direction == "right" || direction == "left") {

      $inner.css(spacingType + "-" + direction, getSpace("x"));

      console.log(getSpace("x"));

    }                                     

  });                

}; 

renderStyle("padding");

CODEPEN LINK - link

Answer 1

这种情况正在发生，因为您将padding设置为内部框而不是外部框。

您可以使用if条件进行设置。

这是工作片段。您可以针对renderStyle("margin");和renderStyle("padding");

对其进行测试

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 xi = getSpace("x");
  var yi = getSpace("y");
  if (spacingType == "padding") {
      var $ei = $outer;
  } else if (spacingType == "margin") {
      var $ei = $inner;
    } 
  $.each(["top", "right", "bottom", "left"], function(index, direction) {
    if (direction == "top" || direction == "bottom") {
      $ei.css(spacingType + "-" + direction, yi);
    }
    else if (direction == "right" || direction == "left") {
      $ei.css(spacingType + "-" + direction, xi);
    }                                     
  });                
}; 

renderStyle("padding");

.outer {
  width:400px;
  height:200px;
  border:1px solid black;
  margin:20px;
  box-sizing:border-box;
}
.inner {
  width:100px;
  height:100px;
  background-color:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="demo" class="outer">
  <div class="inner">
  </div>
</div>

使用.outerWidth（）/。outerHeight（）对带边距/填充的元素进行居中。函数为margin和padding返回不同的值

1 个答案: