垂直对齐 2 个具有灵活高度的浮动 div

Question

我想弄清楚如何垂直对齐 2 个浮动 div。每个 div 都有一个灵活的高度。

这是我到目前为止所拥有的：http : //jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}

/* Columns */
.column {
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;
}
.right {
margin-left:0;
height: 250px
}
.left {
margin-left:5%;
}

然而，左侧的 div 被推到右侧较大的 div 的顶部。我需要这两个 div 垂直居中。

有任何想法吗？

Answer 1

以下是如何使其灵活（没有固定的高度，只需将那些 .column 容器垂直居中，而不管它们的内容如何）：将 .column 设置为 display:inline-block 和 vertical-align: middle in your table-cell .wrap div .

.column {
    display: inline-block;
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    vertical-align: middle;
}

http://jsfiddle.net/VLRpc/2/