html - 为什么“显示：表格单元”会弄乱我的 div？

Question

我正在尝试将字符串“1”、“2”和“3”垂直居中，如下所示：

但是当我使用display: table-cell; vertical-align: middle;所有 3 个 div 时，我得到了他不想要的结果：

HTML 是

<div id='alldivs'>
    <div id='red' class='each_div'>1</div>
    <div id='blue' class='each_div'>2</div>
    <div id='green' class='each_div'>3</div>

</div>

CSS是

.each_div { 
     width: 80px;
     height: 50px; 
     text-align: center;
     display: table-cell; vertical-align: middle;
}

演示

如何保持 3 个 div 垂直对齐，同时保持每个 div 内的垂直对齐？

Answer 1

这是一个概念上的误解。如果没有带有display:table-row表格单元格的父元素，它将始终跨越整个宽度，因为它将创建table-rowand的匿名表格对象table。

根据 W3C 规范文章：表格

HTML 以外的文档语言可能不包含 CSS 2.1 表格模型中的所有元素。在这些情况下，必须假设“缺失”元素才能使表模型正常工作。任何表格元素都会在其周围自动生成必要的匿名表格对象，由至少三个嵌套对象组成，分别对应一个 'table'/'inline-table' 元素、一个 'table-row' 元素和一个 'table-cell' 元素. ......

这是一个 quirksmode 页面，显示了display: table等的用途。显示与此问题相同效果的图像。

要从语义上解决这个问题，您必须添加一个额外的元素以显示为行。

<div id='alldivs'>
    <div id='red' class='each_div'>
        <div class="cell">1</div>
    </div>
    <div id='blue' class='each_div'>
        <div class="cell">2</div>
    </div>
    <div id='green' class='each_div'>
        <div class="cell">3</div>
    </div>
</div>

然后将相对 CSS 分配给它们

#alldivs { display: table; }

.each_div {
     display: table-row;
}

.cell {     
    width: 80px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    border: 1px #000 solid;
}

演示

Answer 2

我认为有一个更简单的方法，使用line-height：

<div id='alldivs'>
    <div id='red' class='each_div'>1</div>
    <div id='blue' class='each_div'>2</div>
    <div id='green' class='each_div'>3</div>
</div>

.each_div { 
     width: 80px;
     height: 50px; 
     line-height:50px;     // set to the same height as the div
     text-align: center;
     clear:both;}          // add clear both to skip line

请参阅此处的jsfiddle并与其他答案进行比较。

Answer 3

您可以将每个包装在另一个<div>中display: table-row;，它会看起来如您所愿：

HTML：

<div id='alldivs'>
        <div class="row">
            <div id='red' class='each_div'>1</div>
        </div>
        <div class="row">
            <div id='blue' class='each_div'>2</div>
        </div>
        <div class="row">
            <div id='green' class='each_div'>3</div>
        </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.each_div { 
     width: 80px;
     height: 50px; 
     display: table-cell; 
     vertical-align: middle;
     border: 1px #000 solid;
}
.row {
    display: table-row;
}​

这是因为table-*被设计为模拟一张表格，因此必须遵循表格结构才能获得表格外观。在这种情况下，您可能只想使用表格。

Answer 4

我找到了一种可以按照您想要的方式工作的解决方法。如果你愿意，你可以使用它：

将您的 CSS 更改为：

.each_div { 
     width: 100%;
     height: 50px; 
     vertical-align: middle;
     text-align:center;
     background:red;

}
#alldivs{
    width:80px;
    display:block;
}

请注意，我已经提到width:80px了父 divalldivs

它给出的输出为：

​</p>