3

从理论上讲，vertical-align应该在带有display:table-cell. 如果你添加一个包装器，它总是有效的display:table。但是当它没有包装器时，有时它会起作用，有时垂直对齐会被完全忽略，这似乎是随机的。您能否解释一下table-cell支持垂直对齐的要求是什么。

4

1 回答 1

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容器中使用单元格的百分比高度时。

要了解为什么会发生这种情况，请参阅CSS 2.1 规范中的这段文字：

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

这有点误导，因为它首先谈论将 CSS 与 HTML 以外的语言一起使用，但它的意思是使用 css 表格样式而不使用<table>, <tr>, <td>etc。所以它在这里也适用于display:table-cell正在使用的地方。

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

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

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

所以表格很小，放在 的左上角，.wrapper表格单元位于其中。垂直对齐仍在发生，但在一个不比文本大的框内，因此文本无处可去。

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

于 2013-03-16T13:20:42.887 回答