div宽度与表格单元格显示

Question

我想在div中垂直对齐我的按钮。我正在使用'display：table-cell'和'vertical-align：middle'。问题是包含div正在缩小到两个按钮的大小而不是保持其原始宽度。

jsFiddle：my table-cell demo

HTML：

<div class="container">
<div class="bar">
<input type="button" value="Click Me">
<input type="button" value="Click Me">
</div>
<div>​

的CSS：

.container{ width: 600px;}
.bar{
background-color: blue;
    //width: 100%;
    height: 100px;
    display:table-cell;

    vertical-align: middle;
}.bar input{height: 60px;}
​

Answer 1

您可以将display:table-row应用于容器：

来源：http://jsfiddle.net/Ktnq9/
演示：http://jsfiddle.net/Ktnq9/show

.container {
    width: 600px;
    table-layout: fixed;
    display: table-row;
}

Answer 2

将display: table;添加到.container。

Answer 3

如果您不关心它们或容器的高度是否可变，您还可以通过向容器添加相同大小的边距并删除table-cell refs来实现此目的：

.bar input{margin: 30px 0;}

http://jsfiddle.net/8WVCA/11/