带有表格单元格显示的 div 宽度答案

【问题标题】：div width with tabel-cell display带有表格单元格显示的 div 宽度
【发布时间】：2012-12-17 04:35:32
【问题描述】：

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

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

【问题讨论】：

您的容器实际上并没有缩小。看到这个jsfiddle.net/8WVCA/4

标签： html css

【解决方案1】：

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

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

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

【讨论】：

这也可以通过在类栏添加以下代码来实现！宽度：100%;
@SumitGera 呃……什么？不，它不能。这只会导致与原始小提琴相同的代码：jsfiddle.net/CCCMC
对不起。我的意思是在容器类中添加以下内容。显示：表格；并跟随在酒吧课上。宽度：100%;

【解决方案2】：

将display: table; 添加到.container。

【讨论】：

【解决方案3】：

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

.bar input{margin: 30px 0;}

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

【讨论】：