CSS不同的垂直对齐元素彼此相邻（顶部，中间，顶部）

Question

假设我有DIV并且在3列内。 Col1和Col3具有随机高度，但Col2始终为20px高度。我需要的是让Col2始终处于中间位置。不幸的是，当我为列设置vertical-align时，如：top，middle，top - 它似乎无法正常工作。 Col2渲染在顶部（或者下面的几个像素），尽管它设置为中间。

当我将所有3列垂直对齐设置为中间时 - Col2神奇地渲染在中间。但我真的不希望Col1和Col3处于中间位置。

当我将它们设置为：顶部，中间，中间 - Col2也能正常工作。当Col3最高时它看起来不错。但我不能保证Col1或Col3的高度，所以这个解决方案也不好。

在FF26，IE9，Opera12中测试。

为什么会这样？我在这里做错了吗？

我的代码：

<style type="text/css">
    .container {
        background: gray;
    }
    .col1 {
        width: 20px;
        height: 60px;
        background: red;
        display: inline-block;
        vertical-align: top;
    }
    .col2 {
        width: 20px;
        height: 20px;
        background: yellow;
        display: inline-block;
        vertical-align: middle;
    }
    .col3 {
        width: 20px;
        height: 80px;
        background: cyan;
        display: inline-block;
        vertical-align: top;
    }
</style>

<div class="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>
</div>