CSS スタイルを使用して表のフォントを垂直中央に配置する方法

CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。

下図のようなカスタムテーブルがあります。返されるデータが変更されると、テキストを自動的に中央揃えにすることができます。

//html  
// 2 つの div をコンテナーとして使用します <el-col :span="3" class="col_row1">
                 <div class="grid-content1">
                  <div class="subject1">{{item.subject1}}</div>
                  </div>  
              </el-col>
//css
      .grid-content1 {
            // 幅: 3.125rem;
            幅: 100%;
            高さ:3.75rem;
            表示: テーブル;
          }
          .subject1 {
            表示: テーブルセル;
            垂直位置合わせ: 中央;
          }

補足：以下のCSSスタイルを見てみましょう - フォントは垂直と水平に中央揃え

<div class="tt">ラララ</div>

 .tt{
            パディング: 0px;
            幅:500ピクセル;
            高さ:200px;
            テキスト配置:中央;
            背景色:#F69;

            表示: テーブルセル;
            垂直方向の配置:中央
        } 

なんで、これ。よし。表のセルとして表示される display: table-cell スタイルを見てください。このようにして、 vertical-align:middleプロパティが有効になります。ディスプレイを取り外すと動作しません。 ！

1. 基本概念

まず第一に、それはまだ概念です。インライン要素とブロックレベル要素を導入することは重要です。なぜなら、一部の属性はブロック要素にのみ使用可能であり、他の属性はその逆であるためです。特定の状況下では、display を使用して設定するなど、それらを相互に変換することもできます。

1. インライン要素（インライン要素とも呼ばれます）:

（１）１行を占めるのではなく、内容に応じて変化する。次のような特徴がある。

（２）幅や高さ、行の高さは設定できません。幅は内容に応じて増加し、高さはフォントサイズに応じて変化します。

（3）インライン要素には外側の境界線を設定できますが、この境界線は上下には影響せず、左右にのみ影響します。

（4）内側の境界線も設定できますが、IE6では内側の境界線は上下には機能せず、左右にのみ機能します。

よく使われるインライン要素は、a - アンカー、b - 太字（非推奨）、br - 改行、em - 強調、font - フォント設定（非推奨）、i - 斜体、img - 画像、input - 入力ボックス、label - 表ラベル、

select - 項目の選択、small - 小さいフォントのテキスト、span - 一般的に使用されるインライン コンテナー、テキスト ブロックを定義、strike - 中間の​​取り消し線、strong - 太字の強調

1. ブロック要素:

（１）常に新しい行から始まり、１行全体を占める。

（２）高さ、行の高さ、余白、パディングをすべて制御できます。

（３）幅はコンテンツに関わらずブラウザの幅と同じになります。

（４）インライン要素やその他のブロック要素を含めることができます。

よく使用されるブロックレベル要素は次のとおりです。div - 最もよく使用されるブロックレベル要素、dl - dt dd で使用されるブロックレベル要素、form - インタラクティブフォーム、h1 - 大きなタイトル、hr - 水平セパレーター、ol - ソートされたフォーム、p - 段落、ul - ソートされていない

リスト変換: 表示設定を使用して、インライン要素にブロックレベル要素の特性を持たせ、その逆も行います。

2. 次は、いくつかの基本的なセンタリング方法についてお話ししましょう。

1. ブロック内のテキストを水平中央に配置します。text-align はブロックレベル要素に使用され、それを使用するブロック要素内のテキストまたは画像に作用します。水平方向に中央揃えになるようにします。

このプロパティは、ブロック要素 (または CSS によってブロック要素として制御されるインライン要素。ただし、インライン要素として制御されるブロック要素には適用できません) にのみ適用できます。つまり、ブロック要素の特性を持つ要素です。これは理解しやすいです。中央揃えは行の中央揃えにする必要があります。これを使用する要素の幅に完全に独立したスペースがない場合、その内部のテキストや画像を中央揃えにすることはできません。

親要素のこの属性は、その下の子要素にも影響します。たとえば、div が text-align に設定されている場合、その中のテキストを中央揃えにすることができ、その子 div 内のテキストも中央揃えにすることができます。ただし、子要素内のテキストの中央揃えは、親 div ではなく、子 div 内で行われます。つまり、その中のすべてのテキストは、最も近い div レイヤーを基準にして中央に配置されます。したがって、このプロパティを使用して、div を親 div 内の中央に配置することはできません。 (div だけでなく、ブロック要素として動作するすべての要素)。

2 つのブロック要素は水平方向に中央揃えされます (幅を設定してブロックを決定します): margin。これは、CSS に初めて触れたときに必ずわかることです。

一般的には、 margin:0 autoを設定できます。これにより、ブロックレベル要素が親要素の中央に配置され、上、下、左、右が中央揃えになります。

水平方向に中央揃えにしたい場合は、 margin-left:auto;margin-right:autoを設定します。

3 ブロック要素は水平方向に中央揃えされます (幅が不明なブロック):

他の記事では、幅が不確かなブロックを中央に配置する方法を紹介する多くの方法を見ました。

実は簡単に言えば、そんなに面倒なことする必要はないのです。これを次のように理解することができます。明示的に幅が設定されていないブロックは、ブロックレベル要素の性質に応じて、デフォルトで 1 行を占めます。したがって、この時点では、ブロック自体はブラウザ ウィンドウの幅であり、水平方向の中央揃えを設定する必要はありません。

この時点でブロック内のコンテンツが中央に配置されている場合:

ブロック要素の子要素もブロック要素である場合、子要素にはmargin autoなどを使用できます。

ブロックレベル要素の子要素がインライン要素である場合、冒頭で紹介した text-align でこの問題を解決することもできます。

ブロック要素の場合は、表示をインラインに設定し、text-alignを使用することもできます。

4. vertical-alignはインライン要素の垂直方向の中央揃えに使用されます。

vertical-align は、非常に複雑な方法で使用できます。いくつかの記事や例を読んだ後、少し混乱しました。最も簡単な使用法についてのみ説明します。

このプロパティは、

1. インライン要素（およびインライン要素に変換されたブロック要素）

2. displayがtable-cellに設定されている要素、

Firefox および IE8 では、ブロックレベル要素の表示値を table-cell に設定して、vertical-align 属性を有効にすることができます。表示効果は、テーブル内の valign="center" と同じです。しかし、ie6,7 ではサポートされていません。

3. <td><tr> のような要素

次のように記述すると、テキストまたは画像の垂直方向の中央を設定できます: vertical-align:middle;この属性は、インライン要素の特性を持つ要素に使用されている限り、その子要素内のテキストや画像にも機能します。しかし、その効果は、テキストまたは画像を、それに最も近い親要素を基準にして中央に配置することです。これは、上で説明した text-align に関する部分と似ています。

5. ブロックレベル要素内のテキストと画像を垂直中央に配置する（ブロックの高さによって決まります。これは別のブログからの引用です。ブロック内にこれらのテキストだけがある場合に非常に便利です）

vertical-align プロパティでは、レイヤー (ブロック レベル要素) 内のテキストを垂直方向に中央揃えすることはできません。ここでは、高さをline-heightと同じに設定する賢い方法を紹介します。

<div style="line-height:500px;height:500;"></div>

6. ブロックレベル要素内のテキストと画像を垂直中央に配置する（ブロックの高さは不確定）

ブロックの高さが不明な場合、その高さは実際には内部のコンテンツの高さによって決まります。中にテキストや画像だけがある場合は、自然に垂直方向に中央揃えされるため、特に設定する必要はありません。

何かを設定したい場合、たとえば、ブロックを大きくして、テキストをブロック内で垂直方向に中央揃えにしたい場合は、 padding-top:20px;padding-bottom:20pxのようにパディングを設定できます。

もちろん、上下の余白を異なるように設定すれば、当然中央揃えにはなりません。

7. ブロックレベル要素の垂直方向の中央揃え

親要素内のブロックレベル要素の垂直方向の中央を設定するには、ブロックレベル要素の水平方向の中央揃えの方法（前述）を参照して余白を設定します。水平方向の中央揃えを設定しない場合は、上部と下部の余白を自動に設定します。

vertical-align:middle;メソッドを使用することもできますが、前提条件として display を table-cell に設定する必要があります。この場合、ブラウザの互換性の問題に注意してください。

要約する

CSS スタイルを使用してテーブル内のフォントを垂直方向に中央揃えする方法について説明したこの記事はこれで終わりです。CSS テーブル フォントの垂直方向の中央揃えに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。