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

我正在尝试使垂直对齐div与自动高度div相关。
这是一个有点难以解释，所以我有截图，将说明一切：与自动高度div相关的垂直对齐div

enter image description here

的橙色 DIV是容器。
的蓝色 DIV是主容器内容器第二。
的绿色 DIV是垂直对齐 DIV应在关系来对准蓝色的。

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

非常感谢！

来源

2012-01-27 Ron

你还没有解释有关宽度任何东西。这三个要素各自的宽度是多少？ – thirtydot 2012-01-27 12:43:15

左边的是500，第二个是248.它真的很重要吗？我会尽快改变它...... – Ron 2012-01-27 12:51:20

如果你的答案是“绿色的div是200px，蓝色的div应该占据所有的剩余空间，橙色的div是屏幕的宽度” 。这会让它变得更加困难（特别是考虑到你需要IE6支持..）。但是，如果你所说的一切都是固定的，它应该很容易。 – thirtydot 2012-01-27 12:52:42

参见：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>

来源

2012-01-27 12:58:34 thirtydot

我会在稍后解释。经过Chrome，IE7测试。应该在IE6中工作。 – thirtydot 2012-01-27 12:59:06

完美地工作。等待你的解释。我从来没有使用*的CSS属性。非常感谢你。 – Ron 2012-01-27 13:11:22

在IE6中，容器中有1px的空行。修复它使用你从这里的答案http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements/5078297#5078297 – Ron 2012-01-27 13:42:23

对于这个答案我已经假设蓝色作为绿色divs有动态高度。

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

相反，我们需要自己计算需要客户端语言的偏移量。接受Javascript的时间。为了使我们更容易，我将使用jQuery，因为它使用真正的甜语法为您做了很多工作。

所以，我们需要找出如何计算偏移量。首先，我们需要知道蓝色元素的中心。足够简单：blue.height/2。接下来，我们需要计算绿色 DIV多少应该去了当绿色 div的顶部对齐蓝色 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！

来源

2012-01-27 12:55:11

我不想要javascript解决方案。我忘了提及...无论如何，这是一个很好的解决方案，为那些谁想要使用JavaScript。 – Ron 2012-01-27 13:08:35

嗯，我比较喜欢Javascript，而不是CSS黑客，但很高兴你找到了正确的答案！ – 2012-01-27 16:19:56

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

回答

相关问题