中间对齐三个跨度div（不同的高度）

Question

确定给出了这个标记：

<div class="wrapper">
<span class="left"></span>
<span class="middle"></span>
<span class="right"></span>
</div>

.left和.right是固定的高度，但.middle的高度会有所不同。

所以我需要它看起来像这样：

-!!-而不是默认的_!!_。

如何实现这一目标？

Answer 1

您可以扩展您的答案given yesterday。

基本上，只需将vertical-align: middle添加到包含display: inline-block的元素。

请参阅： http://jsfiddle.net/thirtydot/qk4dW/1/ - 或here了解相同的代码，但中间元素最高。

.wrapper {
    text-align: center;
}
.left, .middle, .right {
    vertical-align: middle;

    display:inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}
.left, .right {
    height: 100px
}

div {
    border: 1px solid #f0f
}