我有这样的代码,当选中任何复选框时自动增加 div 高度,并在未选中时减少高度,但我想在增加或减少其高度时将 div 在屏幕中垂直居中,我该怎么做?
感谢您的帮助!
http://jsfiddle.net/MetCastle/6adby/
$(function () {
$(':checkbox').click(function() {
$(".scroll").show();
var delta = $(this).is(':checked') ? -1 : 1;
if(delta < 0){
$("#scroll").append( "<h2>" + $(this).next("label").html() + "</h2>");
$('.count').text(parseInt($('.count').text()) - 1);
}
else{
$("#scroll h2:contains('" + $(this).next("label").html() + "')").remove();
$('.count').text(parseInt($('.count').text()) + 1);
}
if ($(".count").text() == "0") {
var children = $('.options').children('input:not(:checked)');
for(var i= 0; i<children.length; i++) {
$(children[i]).prop('disabled', true);
}
} else {
var children = $('.options').children('input:not(:checked)');
for(var i= 0; i<children.length; i++) {
$(children[i]).prop('disabled', false);
}
}
if ($(".count").text() == "18") {
$(".scroll").hide();
}
});
});
最佳答案
您可以将 top 设置为 50%,然后在每次添加时重新计算 margin-top 为 -height/2
top:50%
然后设置你的方法
var scroll=$('#scroll');
scroll.css('margin-top',(Math.ceil(scroll.height()/-2)+'px'))
关于javascript - 具有自动增量功能的中心div(高度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24102970/