Css 具有垂直对齐的左/中/右div

正在尝试设置高114px、宽100%（页面宽度）的外部DIV。在里面我要三个div左，中，右。这些内部3个div的高度各不相同。我希望所有三个内部div都从上到下居中（垂直对齐）

我已经接近浮动左和右或左：0和右：0，但卡在垂直居中的部分。左侧和右侧div仅包含图像中心文本。很难在JSFIDLE上显示图像，所以我不能提供很多示例，抱歉

我发现了一些顶部和底部对齐的示例，但没有以运气为中心

谢谢

编辑：

泰布利兹，你给我指出了正确的方向。谢谢但是，在容器div height-内部div height上，需要除以2。例如：

114-50=64 then divide by 2 = 32 for top. 

还需要使用文本对齐（左/中/右）使所有内部div都达到33%，但效果不错。似乎我应该能够有他们的可伸缩宽度，但仍然正确的位置。 下面是我嵌入的示例图像：

只需浮动3个div，给每个div一个高度，相对定位它们（重要！），并给它们一个

top:container.height-innerdiv.height例如，容器高度114&innerdiv.height of 50=>114-50=64=>
顶部：64px

编辑：如果你不想让你的div全部达到33%，那么通过一些简单的数学运算，你可以用
float
和
margin
属性大致定位你的div

就像你的一样，我更新了

背后的数学是：

Container.length-组合的innerdiv.length=未占用的.length
左边边距：未占用的长度/x（例如50px/5=20%=10px的边距）
我认为这可以解决您的问题，尽管您必须创建3个包装器div

HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

JSIDLE链接：

但请注意：


在html中，右div声明在中间div之前
我的解决方案（css垂直对齐）不适用于IE7或更低版本
我创建此示例是为了演示如何垂直对齐容器并使用列计数（css3），它将自动将3个div布局为3个相等的列

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

对于不支持浏览器（IE），您可以将宽度设置为33%，然后向左浮动


希望这有助于
Tyblitz，这很接近，但我希望中间的DIV始终居中，左/右始终为远左和远右，无论宽度如何。如果我去掉每个（右/中/左）DIV的33%宽度，它们最终都会在other@RichP编辑我的答案，它更适合你吗？如果你喜欢tyblitz的答案，那么接受n答案，或者至少接受upvote。
-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;