jQuery CSS方法更新时是否调整大小？

Question

在使用“常规”方法努力使div在body元素内部垂直居中之后，我决定创建一个小的jQuery函数，以计算需要将元素“居中”到顶部的距离。

它是这样的：

1. 获取容器高度，
2. 得到孩子的身高，
3. “ top” = “（container.height-child.height）/ 2”
4. 将child的margin top设置为“ top”的值。

例如，如果body部的宽度和高度1000px和该body有一个div.inner的孩子，有一个宽度和高度400px的margin-top的div.inner将是300px ，因为(1000-400) / 2 = 300 。

这是进一步解释我的意思的图表：

注意 ： X代表div.inner的页margin-top （因为我没有足够的空间容纳“ 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保持不变。

我希望它能够响应并在调整窗口大小div.inner其margin-top属性更新为适当的值，否则div.inner将不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";
    });
  });
}

并在窗口调整大小上运行它

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

Answer 2

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

创建代码功能

function init_center() {..

尝试从窗口的大小调整事件中调用init_center函数

SNIPPET

 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>