使用灵活的高度垂直对齐2个浮动的div

Question

我正在尝试弄清如何垂直对齐两个浮动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垂直居中。

有什么想法吗？

- TheNameHobbs

---

绝对定位或浮动会破坏任何显示值，你可以使用display(table/table-cell - inline-block)来垂直对齐，或者使用带有有趣负边距的绝对定位或浮动：），我想你知道我的选择会是什么:) - G-Cyrillus

你能提供一个在 jsfiddle 上的例子吗？ - TheNameHobbs

类似这样的东西？http://jsfiddle.net/VLRpc/3/ - G-Cyrillus

或者像这样？ http://jsfiddle.net/VLRpc/4/ - G-Cyrillus

是的，使用在列类上使用display:inline和vertical-align:middle就可以解决问题了。 - TheNameHobbs

Answer 1

这是如何使其灵活（无固定高度，只需保持那些.column容器垂直居中，而不管它们的内容）：将.column设置为display:inline-block，并在table-cell .wrap div内部将其vertical-align:middle。

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

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

- RwwL

Answer 2

好的，只需更改左列中的margin-top值，一切都应该没问题了。如果您想在该列中添加更多内容，请添加一些padding-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;
}

- Francis Hurtubise

---

希望这就是你所想要的，如果不是，请告诉我！:) - Francis Hurtubise

唯一的问题是其中一列必须有固定的高度。而你仍然不知道另一列的高度，因此无法实现真正的居中对齐。 - TheNameHobbs

我觉得你没有理解他的问题，他想要垂直对齐它们。这将只会把左上角向下推50像素。 - Michael Falciglia

好的，对不起。但他仍然可以调整填充来稍微修复它。抱歉，我尝试了。 :) - Francis Hurtubise

我并不是在批评你，只是想说你没有理解这个问题。 - Michael Falciglia

我知道你没有错，一切都好！ :) 如果有其他需要，请告诉我！ - Francis Hurtubise