html - CSS：在中间垂直设置

Question

考虑以下：

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

左 div 的高度小于右 div。我可以将左 div 垂直设置在右 div 的中间吗？我无法设置边距顶部，因为高度不同。

这是 jsfiddle 链接：http: //jsfiddle.net/k8972/

Answer 1

嗨，现在习惯了display inline-block，给予vertical-align 和删除float

像这样

.wrap{
    overflow:hidden;
    border:1px solid red;
    width:250px;
    display:table;
}


.left{
    width:100px;
    height:50px;
    background:yellow;
    display:inline-block;
    vertical-align:middle;
}

.right{
    width:100px;
    height:100px;
    background:brown;
    display:inline-block;
    vertical-align:middle;
}

现场演示http://jsfiddle.net/k8972/2/

Answer 2

您可以使用 display: table-cell 和 vertical-align: middle; 但它不适用于 IE7 或更低版本。

Answer 3

这里提到的几种方法

http://phrogz.net/css/vertical-align/index.html