html - 在另一个父 DIV 中垂直居中两个 DIV，包括它们的内容

Question

我在一个父 div 中有两个 DIV。我希望他们是:

所以我搜索了这方面的例子，因为这是一个微不足道的问题。我尝试了 SO 中的几个示例，但它似乎对我的示例没有任何影响。我试过 vertical-align: middle;和内联 block ，但没有任何成功。这是我的 fiddle 。

http://jsfiddle.net/Sz2fU/1/

HTML

播放A

CSS

.parentBox
{
    height: 100px;
}
.left_box
{
    display: inline-block;
    vertical-align: middle;
    background:green;
    float:left;
}
.right_box
{
    width: 18%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background:blue;
    float:right;
}
.inputBox
{
    height:80px;
}

Answer 1

为了让 vertical-align 在 table 中工作，我们必须使用 table-cell

试试这个:

将display:table;和width:100%;添加到.parentBox

从 .left_box 和 .right_box 中移除 float

将 display: table-cell; 和 text-align:center; 添加到 .left_box 和 .right_box

您需要添加 text-align:center; 以使输入居中。

JSFiddle Demo

更多信息 here 用于垂直对齐。

注意:IE7及以下不支持display:table;或display:table-cell;