css - 垂直对齐 2 个具有灵活高度的 float div

Question

我想弄清楚如何垂直对齐 2 个 float 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 在你的表格单元格内.wrap 分区。

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

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