テーブルセル モバイル アプリケーション scenario_html/css_WEB-ITnose

前書き

最近、フロントエンド観察でこの古い記事を見て、当時のブラウザー市場によると、要素を中央に配置する 5 つの方法について言及していました。おそらく互換性は悪いでしょうが、この古いワインが実際にモバイル端末で使用できるようになりました。

PC 側では、display:table-cell 属性はほとんど使用されません。その理由は、互換性 (IE8 以降と最新のブラウザーでのみサポートされている)、またはこのタグがほとんど注目されていないためです。このタグの目的は、垂直方向のセンタリングレイアウト機能です。この機能により、margin:0 auto 属性に依存せずにセンタリングを実現できます。マージンの外側のマージンは、table-cell の効果を実現できません。

要素を中央揃えにする

ブロックレベルの要素を中央揃えにする場合、誰もが margin:0 auto 属性を思い浮かべますが、この属性は一般的な最外側のレイアウトでよく見られますが、そのような中央揃えは要素全体を中央揃えにするだけです。要素内のコンテンツは残ります。通常の流れに従って、左上隅から右下隅に配置します。しかし、これでは必要な効果は得られません。必要な効果は、要素内のコンテンツの量に関係なく、または新しいコンテンツを追加するときに要素を垂直方向に中央揃えにすることです。

垂直センタリングの方法に関しては、センタリング効果を達成するには、位置 + マージンの最も負の値の方法を使用する必要があります

.test{	height: 400px;	position: absolute;	top:50%;	margin-top: -200px;	background-color: #ccc;}

互換性は非常に優れていますが、要素の高さを最初に決定する必要があります。包含ブロックの高さは要素の内容を収容できないため、この時点でオーバーフローを使用して処理する必要があります。包含ブロックに背景色がある場合は、次のようになります

赤枠内の小さなカスが見えます。明らかに見たくないものです、私はパンツをきちんと履いていたのですが、私の股間は常に空中にありました（笑）。

2.float + height + negative margin, code

#floater	{float:left; height:50%; margin-bottom:-120px;}#content	{clear:both; height:240px; position:relative;}

やはり身長を把握し、マージンを半分に折って引き上げる必要があります。

3. 位置 + マージンを使用して、上下左右のマージンを正確に埋めて垂直方向の中央揃えにします。ただし、コードは次のとおりです

rree

これは可能です。この目的のために、要素に明示的な高さが設定されていない、または IMG などの独自の高さを持つ要素ではないと仮定すると、要素に高さを与えることは、率直に言って、垂直方向に中央揃えされません。適応的な垂直センタリングの目的は達成されません。古米を炒めてみましょう。また違った味わいになるかもしれません。

table-cell

まず、この属性の値を理解しましょう。属性 display:table-cell は、HTML の td および th に相当します。指定した場合、値が配置されている要素の表示効果は、td または th タグの効果と同等になります。 HTML では、テーブル セル td と th は長方形のボックスを生成します。これらのボックスにはコンテンツ、内部マージン、および境界線が含まれているため、テーブル内にテーブル セルのマージンを設定することはできません。デモ→ table で td と要素 table-cell にマージンを設定します

そういえば、先輩が言っていた匿名テーブルオブジェクトについても触れておきますが、 table タグに以下のコードを書くだけで

.test {	position:absolute;	top:0;	bottom:0;	left:0;	right:0;	margin:auto;	height:240px;}

これは、です。匿名テーブル オブジェクトと呼ばれ、ブラウザはレンダリング時に欠落しているタグを自動的に追加します。もちろん、詳細については、w3c 仕様ドキュメントを参照してください: 匿名テーブル オブジェクト

要素自体の属性値が table-cell に設定されているためです。 td、th の効果なので、同じ包含ブロックの下にある複数のブロックレベル要素 (.p タグなど) がこの属性値を使用する場合、p タグの外観は th になり、inline-block [IE8+] と同様になります。および最新のブラウザ] 次のコード

<table>	<!-- 其实浏览器会在这里匿名解析出tbody标签出来，如下图 -->	<tr>		<td>哈哈哈</td>		<td>哦哦哦</td>	</tr>	<tr>		<td>嘿嘿嘿</td>	</tr></table>

効果:

この時点でのマージンの設定も問題なく、各 p タグは互いに隣接しており、高さも設定できます。したがって、この属性はより類似しています。インラインブロック属性に。これはまさに、この属性値により要素が従来のテーブル レイアウトのように動作するためであり、N 個の同一のタグが並べて配置されている場合、この属性は単一のタグで使用するのに適しています。ページモバイル端末、特に最近非常に人気のある H5 シングルページシーンアプリケーションの垂直センタリング効果です。

table-cell の垂直方向の中央揃え

table-cell をページの垂直方向の中央揃えにしたい場合は、いくつかの必須条件が必要です:

1. 親要素が display:table である場合のみ、その親要素がつまり、包含ブロック宣言が table 要素である場合、table-cell 要素は純粋に th, td として表示できます。この点で、親要素は表示の高さによって判断できます。 js を作成し、高さを指定します。

3.vertical -align:center、table-cell 要素をページの垂直方向の中央に適切に配置できるように、垂直方向の中央揃え属性を指定する必要があります。

css：.test {	display: table-cell;	margin-right: 50px;	/*此margin无效*/	padding: 10px;	border: 1px solid #ccc;}HTML：<p class="test">这是第一个p标签</p><p class="test">这是第二个p标签</p><p class="test">这是第三个p标签</p>

ウィンドウの高さ js を取得します

.foo{	display: table; 	width: 100%; 	height: 100%; } .cell {	display: table-cell; 	vertical-align: middle; 	height: 100%; }

デモ→_→ テーブルセル適応垂直中央レイアウト。

このようにして、ブロックレベルの要素をページの視覚範囲内で適切に中央に配置できますが、注意すべき点が 1 つあります:

避免跟position同用，因为一个页面不可能就只有一个标题还有描述，有时候比较奇葩的还需要用到定位 position ，那么这个时候不能在设置 table-cell 的元素同时运用到 position ，这样是为了避免元素返回原本属性。

解决办法就是新建一个标签，所有的定位都是在新建标签上进行。因为前段用到了一个单页面的滑动框架 fullpage ，对英文不感冒的东西可以去腾讯员工做的一个中文档的 fullpage

，页面用到了 table-cell 值，并且页面中出现定位元素，踩了坑，所以这算是自己的一个小总结吧。

提一提vertical-align

.test {		display: table-cell;	*display: inline;	border: 1px solid #ccc;}.va-t{vertical-align: top;}.va-m{vertical-align: middle;}.va-b{vertical-align: bottom;}.va-bl{vertical-align: baseline;}.va-sup{vertical-align: super;}.va-sub{vertical-align: sub;}.va-tt{vertical-align: text-top;}.va-tb{vertical-align: text-bottom;}

刚刚在测试所以的 vertical-align 属性值的时候发现 baseline 跟 sub,super,text-top,text-bottom 表现出来的效果都是一样的【IE8+及现代浏览器】其实也就是默认值。

对于其他三个值

top 表单元格跟其包含块行框顶端对齐;

middle 表单元格内容与其包含块中间对齐;

bottom 表单元格内容与其包含块底端对齐。

结语

好了，暂时就是这么多了，推荐该属性用在移动端的H5单页面转化场景应用上，类似现在微信广告H5广告单页面的滑动效果，假如需求就是做到垂直居的，不妨试试这个 table-cell 属性值。

参考资料：

table-display