序文 ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すでによく寄せられる質問です。この問題には多くの解決策があります。これらの解決策には、それぞれ適用可能なシナリオと長所と短所があり、おおよそ次のようになります。
そこで今日は、効果的だがあまり一般的に使用されていないソリューションの 1 つである、疑似要素 <スタイル タイプ="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> 図から middle: 要素の中央を親要素のベースラインと親要素の それでは、次の例を比較してみましょう。
要約する 実際、この垂直センタリング方法の原理は主に次の点にあります。
CSS 垂直センタリングの代替実装に関するこの記事はこれで終わりです。CSS 垂直センタリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有
1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...
Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
目次【効果】 【実施方法】 【効果】 【実施方法】 <テンプレート> <div i...
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...
サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...
目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...
Xrdp は、グラフィカル インターフェイスを通じてリモート システムを制御できる Microsof...
目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...
目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...
1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...
1. MySQLをシャットダウンする [root@localhost /]# サービスmysqldを...