CSS：在中间垂直设置

Question

请考虑以下事项：

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

左div的高度低于右div。我可以在右侧div的中间垂直设置左侧div吗？由于高度不同，我无法设置margin-top。

这是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