Question

理论上，vertical-align应该在display:table-cell的元素内部工作。如果你添加一个包含display:table的包装器，它总是有效。但是当它没有包装时，有时它会工作，有时垂直对齐将被完全忽略，它似乎是随机的。能否请您解释一下table-cell支持垂直对齐的要求。

Answer 1

这有点推测，但在没有任何例子的情况下，我会在黑暗中拍摄。也许你的意思是这样的：

<!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块中的那个，第二个，第三个和第四个块的文本垂直居中，第一个块中的文本出现在顶部。

这种情况是在display:block容器中使用单元格的百分比高度。

要了解发生这种情况的原因，请参阅the CSS 2.1 spec：

中的此文字

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

这有点误导，因为它首先讨论的是使用CSS而非HTML语言，但这意味着使用css表样式而不使用<table>, <tr>, <td>等等所以它也适用于{{1}正在使用。

该规范继续提供有关如何创建这些匿名对象的详细规则（此处未再现）。结果是，在块包装器中的表格单元格的情况下，在表格单元格周围生成匿名表格和匿名表格行。

我们可以忽略匿名表行，因为这不会影响这里的情况。

匿名表很重要。这个对象有它自己的高度，并且作为一个表只有它的内容需要。当表格单元格被告知为100％高度时，这意味着匿名表格的高度为100％，而不是display:table-cell高度的100％。

所以桌子很小，放在.wrapper的左上角，桌子单元就在里面。垂直对齐仍在发生，但在一个不大于文本的框内，所以文本没有其他地方可以去。

当.wrapper块的样式为.wrapper时，不需要匿名表对象，也不会生成一个。因此，表格单元格与display:table一样高，.wrapper可以在整个空间中生效。

vertical-align何时在table-cell中工作，何时不工作？

1 个答案: