Question

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

 <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容器垂直居中而不管其内容）：set .column to display：inline-block和vertical-align：middle in 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/

Answer 2

在这里，只需更改左栏中的margin-top值，一切都应该是好的。如果您想在该列中添加更多内容，请添加一些填充顶部。这是改变它的css：

.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;
    text-align: center;
    border: 1px solid black;
    margin:0;
}
.right {
    margin-left:0;
    height: 250px;
    float: right;
    margin-right: 1em;
}
.left {
    float: left;
    margin-top: 50px;
    margin-left: 1.4em;
}

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

2 个答案: