使用 margin-top 和 jQuery 垂直对齐答案

【问题标题】：Vertically align using margin-top and jQuery使用 margin-top 和 jQuery 垂直对齐
【发布时间】：2013-08-02 03:47:41
【问题描述】：

我有一个 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

【问题讨论】：

标签： jquery margin vertical-alignment

【解决方案1】：

这是你需要的吗？

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

JSFIDDLE

【讨论】：

【解决方案2】：

尝试将你最后的 jQuery 行更改为：

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

另外，还有语法错误。

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

应该是

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

【讨论】：

【解决方案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/

【讨论】：