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

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. インライン要素(インライン要素とも呼ばれます):

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

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

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

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

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

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

1. ブロック要素:

(1)常に新しい行から始まり、1行全体を占める。

(2)高さ、行の高さ、余白、パディングをすべて制御できます。

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

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

よく使用されるブロックレベル要素は次のとおりです。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 をよろしくお願いいたします。

<<:  HTML文書におけるol要素の数値制限に関する議論

>>:  Vueのリストレンダリングの詳細な説明

推薦する

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

Linux に mysql をインストールするときに /etc に my.cnf ファイルがない問題を解決する

今日、mysql ポートを変更したいと思ったのですが、/etc/ ディレクトリに my.cnf ファ...

web.config (IIS) および .htaccess (Apache) の構成

xml <?xml バージョン="1.0" エンコーディング="...

HTML 選択ボックスのプレースホルダーの作成に関する問題

テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...

Win10 構成 Tomcat 環境変数チュートリアル図

設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

MySQL 5.6 から 5.7 にアップグレードする際のマスター スレーブ遅延問題のトラブルシューティング

最近、Zabbix データベースを MySQL 5.6 から 5.7 にアップグレードしたときに、マ...

Springboot および Vue プロジェクトの Docker デプロイメントの実装手順

目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...

Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

目次要件の説明:要件分析:ニーズの解決問題解決私はフロントエンドの新人ですが、バックエンドのバグの中...

MySQLがファントムリードを解決する方法の詳細な説明

1. ファントムリーディングとは何ですか?トランザクションにおいて、複数のクエリの後に結果セットの数...

MySQLトリガーの使用例の詳細

MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...

nodejsとyarnをインストールし、Taobaoソースプロセスレコードを構成する

目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...

Vueフロントエンドパッケージングの詳細なプロセス

目次1. パッケージ化コマンドを追加する2. パッケージ化されたコードを実行する3. パッケージ化し...