jQuery CSS 调整大小的方法更新？

Question

在使用 "conventional" 方法努力将 div 在 body 元素内垂直居中之后，我决定创建一个小的 jQuery 函数来计算元素需要离顶部多远才能达到 "centred".

它是这样工作的：

获取容器高度，
获取child身高，
"top" = "(container.height - child.height) / 2"
将 child 的边距顶部设置为 "top" 的值。

例如，如果 body 的宽度和高度为 1000px，而此 body 的 div.inner child 的宽度和高度为400px 的 margin-top 和 div.inner 的 300px 因为 (1000-400) / 2 = 300.

这里有一张图来进一步解释我的意思：

注意：X 代表 div.inner 的 margin-top（因为我没有足够的 space "Margin Top = ").

令我惊讶的是这真的有效！！！这是测试代码：

// set the margin top for ".vertical-centre" elements
$(".vertical-centre").each(function() {
  // set the margin-top for the child
  $(this).css("margin-top", function() {
    // NOTE: margin = (container.height - child.height) / 2
    var margin = ($(this).parent().height() - $(this).height()) / 2;
    // default the margin to zero if it's a negative number
    // round the margin down to the nearest whole number
    // specify that the margin-top is in pixels
    return Math.floor(Math.max(0, margin)) + "px";
  });
});

body {
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 1px solid black
}
div.inner {
  width: 40px;
  height: 40px;
  background-color: blue
}
.horizontal-centre {
  display: block;
  margin-left: auto;
  margin-right: auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner horizontal-centre vertical-centre"></div>

注意：我把上面的例子变小了，所以你可以正确地看到它。

不幸的是，现在有另一个问题，当我调整浏览器大小时，div.inner 元素的 margin-top 保持不变。

我希望它能够响应并在 window 调整大小时将其 margin-top 属性更新为适当的值，否则 div.inner 将消失视图和页面将如下所示：

Answer 1

将您的代码包装在一个函数中

function align() {
  $(".vertical-centre").each(function() {
    // set the margin-top for the child
    $(this).css("margin-top", function() {
      // NOTE: margin = (container.height - child.height) / 2
      var margin = ($(this).parent().height() - $(this).height()) / 2;
      // default the margin to zero if it's a negative number
      // round the margin down to the nearest whole number
      // specify that the margin-top is in pixels
      return Math.floor(Math.max(0, margin)) + "px";
    });
  });
}

并且运行它也会 window 调整大小

align(); // first run
$(window).on('resize', align); // when window resize

Answer 2

您可以使用 https://api.jquery.com/resize/

为您的代码创建一个函数

function init_center() {..

尝试从 window

的调整大小事件中调用 init_center 函数

片段

function init_center() {
  // set the margin top for ".vertical-centre" elements
  $(".vertical-centre").each(function() {
    // set the margin-top for the child
    $(this).css("margin-top", function() {
      // NOTE: margin = (container.height - child.height) / 2
      var margin = ($(this).parent().height() - $(this).height()) / 2;
      // default the margin to zero if it's a negative number
      // round the margin down to the nearest whole number
      // specify that the margin-top is in pixels
      return Math.floor(Math.max(0, margin)) + "px";
    });
  });
}

$( window ).resize(init_center); // Handle resize of window

init_center(); // Doing it first time

body {
  width: 400px;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 1px solid black
}

div.inner {
  width: 200px;
  height: 200px;
  background-color: blue
}

.horizontal-centre {
  display: block;
  margin-left: auto;
  margin-right: auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner horizontal-centre vertical-centre"></div>

jQuery CSS 调整大小的方法更新？

jQuery CSS method update on resize?

javascript

jquery

viewport

vertical-alignment

window-resize