序文 ご存知のとおり、「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. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...
結果: html <nav id="nav-1"> <a cl...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...
事前に言っておくDocker を使用すると非常にシンプルなデプロイメント環境を実現できることは誰もが...
序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...
MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...
Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般...
ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...
序文最近、Tomcat の起動プロセスを分析していました。Tomcat のソース コードはアイデア次...
まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...
mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...