Question

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

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

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

Demo

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

Answer 1

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

根据W3C规范文章： Tables

HTML以外的文档语言可能不包含CSS 2.1表模型中的所有元素。在这些情况下，必须假定“缺少”元素才能使表模型起作用。任何表元素都会自动生成必要的匿名表对象，包含至少三个对应于'table'/'inline-table'元素的嵌套对象，一个'table-row'元素，以及'table-cell'元素。 .....

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

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

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

Demo

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并与其他答案进行比较。

enter image description here

Answer 3

您可以使用<div>将每个display: table-row;包裹在另一个<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>中，它将按您的意愿显示：

HTML：

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

CSS：

table-*

这是因为{{1}}旨在模拟表，因此必须遵循表结构才能获得表外观。在这种情况下，您可能只想使用表格。

Answer 4

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

将您的CSS更改为：

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

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

请注意，我已为父div width:80px

提及alldivs

它将输出显示为：

Output of above CSS

为什么“display：table-cell”弄乱了我的div？

4 个答案:

Demo