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>