将两个DIV（包括其内容）垂直放在另一个父DIV中

Question

我在父div中有两个DIV。我希望他们成为：

所以我搜索了这个例子，因为这是一个微不足道的问题。我尝试了一些SO的例子，但它似乎对我的例子没有任何影响。我试过vertical-align：middle;和内联块但没有任何成功。这是我的小提琴。

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

从float和.left_box

移除.right_box

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

您需要添加text-align:center;以将输入置于中间位置。

的 JSFiddle Demo

有关垂直对齐的更多信息 here 。

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

Answer 2

这里的诀窍是对父div使用display: table，为孩子使用display: table-cell;否则，vertical-align不受尊重。

JSFiddle：DEMO

.parentBox {
    width: 100%;
    height: 100px;
    border: 1px solid lime;
    display: table;
}

.left_box,
.right_box {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.left_box {
    background:green;
}
.right_box {
    width: 18%;
    height: 100%;
    background:blue;
}
.inputBox {
    height:80px;
}

Answer 3

将line-height: 100px添加到父div。 Vertical-align:middle引用line-height，因此将其设置为块的高度即可完成工作。只是不要忘记将line-height重置为正常的孩子（否则，他们也将与line-height: 100px一起使用，如果其中的文字超过一行，则会产生巨大阻碍。）