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/

使用margin-top和jQuery垂直对齐

3 个答案: