什么时候vertical-align在table-cell中工作，什么时候不工作？ [英] When does vertical-align works in table-cell, and when doesn't?
问题描述
理论上， vertical-align 应该在具有 display：table-cell 的元素中工作。它总是工作，如果你添加一个包装器 display：table 。但是当它没有包装，有时它会工作，有时垂直对齐将完全被忽略，它似乎随机。能否请您解释一下 table-cell 支持垂直对齐的要求。
Theoretically, vertical-align supposed to work inside an element with display:table-cell. It always works if you add a wrapper with display:table around. But when it has no wrapper, sometimes it will work and sometimes vertical-align will be completely ignored, it seems random. Could you please explain me what are the requirements for a table-cell to support vertical-alignment.
推荐答案
这是一个有点推测，但是没有任何例子，我会在黑暗。也许你的意思是这样的：
This is a little bit speculative, but in the absence of any examples, I'm going to take a shot in the dark. Maybe you mean something like this:
<!DOCTYPE html>
<title>Test case</title>
<style>
.wrapper { height: 80px; width:100%; }
.percentage .wrapper { border: 1px solid red; }
.fixed .wrapper { border: 1px solid blue; }
.height-cells-test { margin-bottom: 20px; }
.as-block { display: block; }
.as-table { display: table; }
.cell { display:table-cell; vertical-align:middle; }
.percentage .cell { height: 100%; }
.fixed .cell { height: 80px; }
</style>
<div class="percentage height-cells-test">
<div class="wrapper as-block">
<div class="cell">
test percentage height of cell in block
</div>
</div>
<div class="wrapper as-table">
<div class="cell">
test percentage height of cell in table
</div>
</div>
</div>
<div class="fixed height-cells-test">
<div class="wrapper as-block">
<div class="cell">
test fixed height of cell in block
</div>
</div>
<div class="wrapper as-table">
<div class="cell">
test fixed height of cell in table
</div>
</div>
</div>
如果你在 jsfiddle ，你会看到四个 .wrapper 块的第二，第三和第四块
If you check this out in the jsfiddle, you'll see that of the four .wrapper blocks, the second, third and fourth blocks have their text vertically centred, the text in the first block appears at the top.
这种情况是当单元格的百分比高度在中使用时， display：block 容器。
This case is when a percentage height for the cell is used in a display:block container.
要了解这种情况的原因，请参阅 CSS 2.1规范：
To understand why this happens, see this text from the CSS 2.1 spec:
除HTML之外的文档语言可能不包含CSS 2.1表模型中的所有元素。在这些情况下，必须假定缺少元素，以便表模型可以工作。任何表格元素都会自动生成必要的匿名表格对象，它由至少三个嵌套对象组成，这些对象对应于一个'table'/'inline-table'元素，'table-row'元素和'table-cell' 。缺少的元素生成匿名对象...
Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. Missing elements generate anonymous objects ...
这有点误导，因为它开始谈论使用CSS而不是HTML，但它的意思是使用css表样式而不使用< table>，< tr>，< td> 等，因此它也适用于 display：table-cell 正在使用。
This is slightly misleading, as it starts by talking about using CSS with languages other than HTML, but what it means is using css table styling without using <table>, <tr>, <td> etc. so it applies here as well where display:table-cell is being used.
本规范继续给出详细规则创建匿名对象。结果是，在块包装器中的table-cell的情况下，在表单元周围生成匿名表和匿名表行。
The spec goes on to give detailed rules (not reproduced here) about how these anonymous objects are created. The upshot is that in the case of the table-cell inside the block wrapper, an anonymous table and an anonymous table-row are generated around the table cell.
我们可以忽略匿名表行，因为这不会影响这里的情况。
We can ignore the anonymous table-row, as that's not affecting the situation here.
匿名表很重要。这个对象有它自己的高度，并且作为一个表只有它的内容需要的高度。当表格单元被告知为100％高度时，这意味着 .wrapper 。
The anonymous table matters though. This object has it's own height, and being a table is only as high as its content needs to be. When the table-cell is then told to be 100% height, that means 100% height of the anonymous table, not 100% of the height of the .wrapper.
所以表很小，放在 .wrapper ，并且table-cell位于其中。
So the table is small, and placed at the top left hand corner of the .wrapper, and the table-cell sits inside it. The vertical alignment is still happening, but inside a box that's no bigger than the text, so there's nowhere else for the text to go.
当 display：table 的样式，不需要一个匿名表对象，也不会生成一个。所以表格单元格与 .wrapper 一样高，而 vertical-align：middle 整个空间。
When the .wrapper block has styling of display:table, there is no need for an anonymous table object, and one isn't generated. So the table-cell is as high as the .wrapper and the vertical-align:middle can take effect across the whole of that space.
这篇关于什么时候vertical-align在table-cell中工作，什么时候不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
