3

理論的には、vertical-alignを持つ要素内で動作するはずdisplay:table-cellです。周りにラッパーを追加すると、常に機能しますdisplay:table。ただし、ラッパーがない場合は、機能する場合もあれば、vertical-align が完全に無視される場合もあります。これはランダムに見えます。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でこれを確認すると、4 つの.wrapperブロックのうち、2 番目、3 番目、4 番目のブロックのテキストが垂直方向の中央に配置され、最初のブロックのテキストが上部に表示されることがわかります。

これは、display:blockコンテナーでセルの高さのパーセンテージが使用されている場合です。

このようなことが起こる理由を理解するには、CSS 2.1 仕様の次のテキストを参照してください。

HTML 以外のドキュメント言語には、CSS 2.1 テーブル モデルのすべての要素が含まれていない場合があります。このような場合、テーブル モデルが機能するためには、"欠けている" 要素を想定する必要があります。テーブル要素は、「table」/「inline-table」要素、「table-row」要素、および「table-cell」要素に対応する少なくとも 3 つのネストされたオブジェクトで構成される、必要な匿名テーブル オブジェクトをそれ自体の周りに自動的に生成します。 . 欠落している要素は匿名オブジェクトを生成します...

これは、HTML 以外の言語で CSS を使用することから始まるので、少し誤解を招きますが、これは、使用せずに CSS テーブル スタイルを使用することを意味する<table>, <tr>, <td>ため、ここでもdisplay:table-cell使用されている場所に適用されます。

仕様は、これらの匿名オブジェクトの作成方法に関する詳細なルール (ここでは再現されていません) を提供します。つまり、ブロック ラッパー内のテーブル セルの場合、匿名テーブルと匿名テーブル行がテーブル セルの周囲に生成されます。

ここでは状況に影響を与えていないため、無名のテーブル行は無視できます。

ただし、匿名テーブルは重要です。このオブジェクトには独自の高さがあり、テーブルであることはそのコンテンツが必要とする高さだけです。table-cell が 100% の高さであると指示された場合、それは の高さの100% ではなく、匿名の tableの 100% の高さを意味し.wrapperます。

そのため、テーブルは小さく、 の左上隅に配置され、.wrapperテーブル セルはその中にあります。垂直方向の配置はまだ行われていますが、テキストよりも大きくないボックス内にあるため、テキストを配置する場所は他にありません。

.wrapperブロックのスタイルがの場合display:table、匿名テーブル オブジェクトは必要なく、生成されません。したがって、テーブル セルは と同じ高さで.wrapperあり、vertical-align:middleはそのスペース全体で効果を発揮します。

于 2013-03-16T13:20:42.887 に答える