居中對齊三個跨在一個div（不同高度）

Question

OK給出這個標記：

<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 
}