如何根據身高動態更改元素邊距頂部

我的身體內有一個容器，我需要將此元素設置爲居中垂直對齊。我需要這樣做也取決於身高，並動態改變它。如何根據身高動態更改元素邊距頂部

我嘗試了類似下面的代碼，但它並不完美，最重要的是不動態。注意：我不能用css來做這件事。

var ah = $('body').height(); 
var ph = $('#main_container').parent().height(); 
var mh = Math.ceil((ph-ah)/2); 
$('#main_container').css('margin-top', mh);

來源

2012-08-28 Lukas

您可以使用JQuery注入CSS：

$('#main_container').css("position", "absolute"); 
$('#main_container').css("margin-top", "auto"); 
$('#main_container').css("margin-bottom", "auto"); 
$('#main_container').css("top", 0); 
$('#main_container').css("bottom", 0);

如果你也想水平居中，你可以刪除margin-top和margin-bottom線，並添加：

$('#main_container').css("margin", "auto"); 
$('#main_container').css("left", 0); 
$('#main_container').css("right", 0);

來源

2012-08-28 21:05:29 Ian

哦，它的工作原理，對此很多thx – Lukas

將其綁定到resize事件：

$(window).on('resize', function() { 
    var $container = $('#main_container'); 
    var height = Math.ceil(($container.parent().height() - $('body').height())/2); 

    $container.css({marginTop: height}); 
}).trigger('resize');

它不會像CSS平滑，但它會奏效。爲什麼你不能用CSS來做到這一點？

來源

2012-08-28 20:39:24 Blender

我不知道爲什麼但它不起作用，我還有其他一些隱藏的元素，如果我用css做這件事，它將會打擊他們...... – Lukas

如何根據身高動態更改元素邊距頂部

回答

相關問題