Jquery垂直居中..錯誤是什麼？

有誰能告訴我爲什麼這是行不通的？問題是當我打開頁面時，開始時.flex-viewport不在正確的位置，因爲當我調整大小或重新加載頁面時。Jquery垂直居中..錯誤是什麼？

您可以在這裏看到問題：http://www2.adcd.ch/?projects=fatti-e-cifre。如果您使用智能手機或平板電腦進行檢查，您可以看到什麼意思：開始處的圖像滑塊不在垂直中間，因爲您可以在重新加載頁面時查看。沒有控制檯錯誤。我假設我對jquery不太好，我正在努力學習！ thx提前。

var halfWindowHeight = jQuery(window).height()/2; 
var halfViewportHeight = jQuery('#content .flexslider .slides li').height()/2; 

function putOnTheMiddle(){ 
    var halfWindowHeight = jQuery(window).height()/2; 
    var halfViewportHeight = jQuery('#content .flexslider .slides li').height()/2; 
    var result = parseFloat(halfWindowHeight) - parseFloat(halfViewportHeight); 
    var viewportNavHeight = jQuery('.flex-control-nav li').height(); 
    var paddingViewNav = jQuery('.flex-control-nav').css('padding-top'); 
    var totViewNav = parseFloat(viewportNavHeight) + parseFloat(paddingViewNav); 

    jQuery('.flex-viewport').css("margin-top", result - parseFloat(totViewNav) + "px"); 
} 


jQuery(window).load(function(halfViewportHeight){ 
    putOnTheMiddle() 
}); 

jQuery(window).resize(function(halfViewportHeight){ 
    putOnTheMiddle() 
});

來源

2015-01-16 Michela

這實際上並不是一個錯誤。在頁面加載開始時，div的margin-top值爲0，或者其他值爲smth，但是，當腳本運行時，它會應用新的邊距，但是，它隨着您給定的轉換移動到該邊緣。造成這種情況的原因是您正在將腳本加載到頁面底部，因此瀏覽器在所有DOM加載完成後都會獲取它們。對於所有的，你可以使用一些CSS像

#yourdiv{ 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -half-of-element-heigh; 
    margin-left: -half-of-element-width; 
}

對於動力高度元素，你可以使用flexbox：

#yourParentdiv{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Fiddle

來源

2015-01-16 09:30:47

問題是，我無法知道智能手機上的元素的一半，因爲每種類型的移動設備上的大小是不同的。這就是爲什麼我使用jQuery ..我已經嘗試加載腳本頁面頂部，但沒有任何變化！ – Michela

@Michela更新了我的答案。嘗試flexbox :) –

我試過了，但它不工作..你認爲可能有另一種方式？ – Michela

我只是調試你的代碼，發現paddingViewNav即將推出15px，這將導致滑塊向上移動更多....理想情況下，與桌面相比，移動應該更少。

來源

2015-01-16 09:39:10 Vijay

Jquery垂直居中..錯誤是什麼？

回答

相關問題