css - 中间对齐 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
}