CSS 垂直センタリングの代替実装コードの詳細な説明(非従来型)

CSS 垂直センタリングの代替実装コードの詳細な説明(非従来型)

序文

ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すでによく寄せられる質問です。この問題には多くの解決策があります。これらの解決策には、それぞれ適用可能なシナリオと長所と短所があり、おおよそ次のようになります。

  • フレックスレイアウト
  • グリッドレイアウト
  • テーブルレイアウト
  • 高さのある行の高さ
  • マージンのあるポジション
  • 変換による位置
  • ...

そこで今日は、効果的だがあまり一般的に使用されていないソリューションの 1 つである、疑似要素:before vertical-align:middleと組み合わせて要素の垂直方向の中央揃えを実現するという原理を理解します。具体的なコード実装を見てみましょう。

<スタイル タイプ="text/css">
  。親 {
    表示: インラインブロック;
    幅: 300ピクセル;
    高さ: 300px;
    フォントサイズ: 0;
    背景: #80848f;
    テキスト配置: 中央;
  }
  .parent:before {
    表示: インラインブロック;
    幅: 20px;
    高さ: 100%;
    コンテンツ: '';
    背景: #ff9900;
    垂直位置合わせ: 中央;
  }
  。子供 {
    表示: インラインブロック;
    幅: 50px;
    高さ: 50px;
    背景: #19be6b;
    垂直位置合わせ: 中央;
  }
</スタイル>
<div class="parent">
  <div class="child">子</div>
</div>

上記のコードを実行した結果は次のようになります。

皆さんはすでにこのコードに精通していると思いますが、その背後にある原理を本当に理解していますか?次に、垂直方向のセンタリングを段階的に実現する方法を見てみましょう。

分析する

まず、重要なポイントを知っておく必要があります。つまり、親要素のベースラインの位置は固定ではなく変更可能であるということです。これを覚えておくことは非常に重要です。次に、コードを簡素化して重要な部分を削除しましょう。

<スタイル タイプ="text/css">
  。親 {
    表示: インラインブロック;
    幅: 300ピクセル;
    高さ: 300px;
    /* フォントサイズ: 0; */
    背景: #80848f;
    テキスト配置: 中央;
  }
  .parent:before {
    表示: インラインブロック;
    幅: 20px;
    高さ: 100%;
    コンテンツ: '';
    背景: #ff9900;
    /* 垂直位置揃え: 中央; */
  }
  。子供 {
    表示: インラインブロック;
    幅: 50px;
    高さ: 50px;
    背景: #19be6b;
    /* 垂直位置揃え: 中央; */
  }
</スタイル>
<div class="parent">
  <div class="child">子</div>
</div>

font-size:0vertical-align:middleコメントアウトすると、実行結果は次のようになります。

図から于:before場合、vertical-align:middle を追加しても追加しなくても結果は同じであることがわかります。常に親要素を垂直方向に埋めます。しかし、.child 要素の場合は状況が異なります。垂直位置が変わっています。なぜでしょうか。
実際、ここでの疑似要素の役割は、親要素のベースラインの位置を変更(または再定義)することです。MDN ドキュメントのvertical-align:middleの定義を確認しましょう。

middle: 要素の中央を親要素のベースラインと親要素のx-heightの半分に揃えます。

それでは、次の例を比較してみましょう。

  • 疑似要素の中央は垂直方向の中点であり、理解するのは難しくありません。
  • 今のところ、親要素のベースラインがどこにあるかは気にしません。変更できることを覚えておけば十分です。
  • x-heightの半分。親要素のfont-size 0に設定しているため、 x-height (小文字のxの高さ)の半分も0、つまり高さがない。

x-height : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : font-size x-height : : : : : : : : :

要約する

実際、この垂直センタリング方法の原理は主に次の点にあります。

  • CSSの要素はデフォルトで左上に揃えられます
  • 疑似要素の高さは親要素と一致している
  • 親要素はフォントサイズを0に設定し、したがってx高さも0に設定されます。
  • 親要素のベースラインの位置は変更可能です

CSS 垂直センタリングの代替実装に関するこの記事はこれで終わりです。CSS 垂直センタリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JS でオブジェクトを作成する 4 つの方法

>>:  ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

推薦する

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

Ubuntu 18.04で国内ソースを変更する方法の例

Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

固定ボトムコンポーネントを実装した Vue の例

目次【効果】 【実施方法】 【効果】 【実施方法】 <テンプレート> <div i...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Linux の高並列性とパフォーマンス最適化の落とし穴の紹介

目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

Win7 インストール MySQL 5.6 チュートリアル図

目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...

Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法

Xrdp は、グラフィカル インターフェイスを通じてリモート システムを制御できる Microsof...

js は axios 制限リクエスト キューを実装します

目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...

Linux でのマルチスレッドプログラミング例の分析

1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...

Linux で MySQL 8.0 バージョンをアンインストールする方法

1. MySQLをシャットダウンする [root@localhost /]# サービスmysqldを...