垂直對齊孩子的div使用jQuery在瀏覽器跳轉調整

Vertically centering child div in parent container with JavaScript on page load is not setting position?

這讓我垂直居中一個div，當我不知道的高度容器。

所有效果都很好，但在Safari 7.0.1和Chrome 32.0.1700.77中，垂直對齊的div在瀏覽器調整大小時上移約30px。在Firefox中，它只顯示Safari和Chrome移動div到瀏覽器大小（不跳）的位置。

上的負載，瀏覽器大小調整前：

<div id="s1" class="wrp_item" style="bottom: 286.2px;">

你可以看到代碼/標記，我在這裏使用的例子，雖然我不能：

<div id="s1" class="wrp_item" style="bottom: 257.1px;">

瀏覽器調整大小後複製的JS小提琴問題：

http://jsfiddle.net/RKhmY/

ONLIN e演示再現Safari/Chrome中的錯誤。請注意在Firefox中如何不顯示錯誤： http://so.s2371.gridserver.com/test.html

任何想法的額外像素來自瀏覽器調整大小，從而導致跳轉？

來源

2014-01-23 saintmalo

您已經綁定DOM準備處理程序中的窗口大小調整處理，所以沒有必要使用這種語法

$(function() { //This line should be removed 
    $(window).resize(function() { 
     homepageLead(); 
    }).resize(); 
}); //This line should be removed

只是刪除$(function() {和});

http://jsfiddle.net/RKhmY/2/

來源

2014-01-23 16:50:59

這並沒有阻止瀏覽器的大小調整的跳躍。這幾乎就像在頁面加載沒有被正確定位。在瀏覽器調整大小時，它顯示正確的位置。 – saintmalo

也許做它如果你以另一種方式進行操作，請提供幫助：

將內容（＃s1）從CSS頂部對齊50％。
獲取內容的高度（＃s1）。
給內容（＃S1）的含量/ 2

jsFiddle

CSS的高度的負餘量：

div.relative { position: relative; } 
section#hero div.item, section#hero { min-height: 750px; position: relative;} 
section#hero .wrp_item { width: 100%; position: absolute; top: 50%;} 
section#hero .wrp_item .wrp_item_inner { padding: 0px 20px; }

的jQuery：

jQuery(document).ready(function($) { 

      var homepageLead = function() { 
       var message = $('#s1'), 
        message_height = message.height(); 
       return message.css('margin-top', -message_height/2); 
      }; 

      $(function() { 
       $(window).resize(function() { 
        homepageLead(); 
       }).resize(); 
      }); 

    // end  
    });

來源

2014-01-23 17:16:55 ElBrm

好的方法和感謝清理JS。不幸的是，在加載和瀏覽器調整大小之間仍然存在跳躍。此跳轉僅在Safari和Chrome中發生。 – saintmalo

我嘗試使用margin-top，paddingTop，top，bottom。無論我在哪裏定位div，我仍然會在瀏覽器調整大小時獲得此跳轉。 – saintmalo

嘗試message.outerHeight（）;而不是message.height（）;在jQuery中。如果這解決了這個問題，那麼因爲.height（）不會計算div的填充。 – ElBrm

我開始認爲這可能是我的CSS的一個錯誤。我已經嘗試過其他插件與相同的錯誤。

僅供參考，如果任何人有同樣的問題，下面的鏈接工作對我來說沒有任何跳躍：

https://github.com/BrandonJacoby/Midway.js

來源

2014-01-24 17:28:23 saintmalo

垂直對齊孩子的div使用jQuery在瀏覽器跳轉調整

回答

相關問題