垂直对齐div与自动高度div相关

Question

我正在尝试制作与自动高度div相关的垂直对齐div 这有点难以解释所以我有截图可以解释一切：

橙色 div是容器 蓝色 div是主容器内的第二个容器 绿色 div是垂直对齐 div，应该与蓝色对齐。

我不知道如何使这项工作。我希望它是跨浏览器（ie6 +，ff＆amp; chrome）。

非常感谢！

Answer 1

对于这个答案，我假设蓝色和绿色div都有动态高度。

为了计算绿色 div的正确偏移，我们可以不使用CSS。 CSS不允许我们使用另一个元素的数据来定位元素。

相反，我们需要自己计算偏移量，这需要客户端语言。是时候拥抱Javascript了。为了方便我们，我将使用jQuery，因为它使用真正的甜蜜语法为您做了很多工作。

因此，我们需要找出如何计算偏移量。首先，我们需要知道 blue 元素的中心。足够简单：blue.height / 2。接下来，当绿色 div的顶部与<的实际中心对齐时，我们需要计算绿色 div应该向上多少strong>蓝色 div。这基本上是绿色 div高度的一半，对吧？这为我们提供了下一个公式：(blue.height / 2) - (green.height / 2)。

好吧，我们把它放在javascript中！

var center = $('div.blue').outerHeight(true) / 2; // this is the blue div
var offset = center - $('div.green').height() / 2;

最后，设置偏移量：

$('div.green').css({
    'margin-top': margin
});

很酷的理论，但我确信你希望看到它的实际效果。您可以看到演示here。

---

编辑：

哦是的，我忘了提到jQuery是一个跨浏览器的框架，支持非常非常古老的浏览器..阅读所有相关内容here！

Answer 2

请参阅： http://jsfiddle.net/thirtydot/aeFrH/

<强> CSS：

#container {
    width: 748px;
    background: orange;
}
#container-inside {
    width: 500px;
    background: cyan;
}
#aligned {
    width: 248px;
    background: green;
}
#container-inside, #aligned {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

<强> HTML：

<div id="container">
    <div id="container-inside">
        Some<br />
        content<br />
        is<br />
        in<br />
        here.<br />
    </div><div id="aligned">
        Aligned.
    </div>
</div>