表示:テーブルセル属性の演習-htmlチュートリアル-php.cn

表示:テーブルセル属性の演習

WBOY

リリース： 2016-08-10 08:49:43

オリジナル

1100 人が閲覧しました

display:table-cell 属性は、ラベル要素が td ラベルと同様にテーブルセルの形式で表示されることを意味します。現在、IE8 以降とその他の最新のブラウザーはこの属性をサポートしていますが、残念ながら IE6/7 では実際のプロジェクトでの display:table-cell 属性の適用が大幅に制限されています。

セルには、要素の垂直方向の中央揃え、関連するスケーリングなどの特別な属性があることは誰もが知っているため、IE6/7 はこの属性をサポートしていませんが、display:table-cell には依然として多くの潜在的な価値があります。幸いなことに、IE6/7 のいくつかの厄介なプロパティとレンダリングにより、同じまたは類似の効果を他の方法で実現できます。

他のいくつかの表示属性と同様に、table-cell も float、position:absolute などの他の CSS 属性によって破棄されます。そのため、display:table-cell と float:left または Position:absolute 属性を使用する場合は、そうしないようにしてください。一緒に使用してください。 display:table-cell が設定された要素は幅に非常に敏感で、マージン値には反応せず、パディング属性には反応しません。これらは基本的に td タグ要素と同じです。

vertical-align 属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。表のセルでは、このプロパティはセルボックス内のセルの内容の配置を設定します。

/*水平方向のセンタリングを設定します*/

text-align:center
/* IE 用のハック */
*font-family:Arial;/*Prevent GBK などの非 UTF-8 によって引き起こされるハッキング失敗エンコーディング*/
幅: 200px;
高さ: 200px;
垂直整列:middle;