0

我想在 div 中垂直对齐我的按钮。我正在使用“显示：表格单元”和“垂直对齐：中间”。问题是包含的 div 被缩小到两个按钮的大小，而不是保持其原始宽度。

jsFiddle：我的表格单元演示

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;}
​
4

3 回答 3

1

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

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

.container {
    width: 600px;
    table-layout: fixed;
    display: table-row;
}
于 2013-01-02T20:05:13.963 回答
1

添加display: table;到.container.

于 2013-01-02T20:07:19.810 回答
0

如果您不关心它们具有可变高度的容器或容器，您还可以通过向容器添加相同大小的边距并删除表格单元格引用来实现这一点：

.bar input{margin: 30px 0;}

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

于 2013-01-02T20:53:43.800 回答