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