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

你好，现在用于显示内联 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/