jquery - 使用 margin-top 和 jQuery 垂直对齐

Question

我有一个 div 需要通过使用 css 更改 margin-top 来垂直居中。这个 div 将是动态的，我想避免position:absolute.

HTML：

<div class="container"> 

    <div class="exp">
        <p>content</p>

    <p>content</p>
    </div>

</div>

jQuery：

var cHeight = $('.container').height();
var expHeight - $('.exp').height();

$('.exp').css({"margin-top":10});

但是，我不知道用于使用父高度居中 div 的逻辑，更不用说如何将它应用到 jQuery 中了。

JSFIDDLE

Answer 1

这是你需要的吗？

var cHeight = $('.container').height();
var expHeight = $('.exp').height();
$('.exp').css({"margin-top": (cHeight-expHeight)/2+"px"});

JSFIDDLE

Answer 2

尝试将您的最后一个 jQuery 行更改为：

$(".exp").css("margin-top",cHeight/2 - expHeight/2);

此外，还有语法错误。

var expHeight = $(".exp").height();

应该

var expHeight = $(".exp").height();

Answer 3

首先，声明 var expHeight 时出现语法错误（您使用 - 而不是 = ）。

您需要测量外部容器 (cHeight) 并减去内部内容高度 (expHeight)。这为您提供了高度差，但您只需将其应用于元素的一侧（margin-top），以便将该数字除以 2。然后您将其设置为 margin-top。

var cHeight = $('.container').height();
var expHeight = $('.exp').height(); // Fix syntax error
var mTop = (cHeight - expHeight) / 2; // subtract inner from outer and divide by 2

$('.exp').css({ marginTop: mTop  }); // set CSS

http://jsfiddle.net/t2kUG/1/