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 つの方法

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

推薦する

MySQL シリーズ 12 バックアップとリカバリ

目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例

レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

docker-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

事前に言っておくDocker を使用すると非常にシンプルなデプロイメント環境を実現できることは誰もが...

スクロールバーを非表示にしてコンテンツをスクロールする CSS サンプルコード

序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

Vue プロジェクトにおけるトランジション コンポーネントの適用の概要

​Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

Html/Css (初心者が最初に読むべきガイド)

1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...

Maven モードで Tomcat ソースコードを実行する方法

序文最近、Tomcat の起動プロセスを分析していました。Tomcat のソース コードはアイデア次...

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...

mysql5.7 リモート アクセス設定

mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...