フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は margin:0 auto; と親要素の text-align: center; によって実現できます。しかし、垂直方向の中央揃えを実現するのはそれほど簡単ではありません。以下では、私が作品で垂直方向の中央揃えを実現するために使用しているいくつかの方法を紹介します。 1. 行の高さは高さと等しい/行の高さのみを設定するこの方法は、テキストを中央揃えするのに適しています。 コアは、行の高さをそれを囲むボックスの高さと同じに設定するか、高さを設定せずに行の高さを設定することです。 この方法は、テキストが中央揃えされ、高さが固定されているシーンに適しています。 使用すると便利で役立ちます。 //html <div class="middle">555</div> //css 。真ん中{ 高さ: 50px; 行の高さ: 50px; 背景: 赤; } 注目すべきは インライン要素の場合は高さがないので、まずインライン要素をインラインブロックまたはブロック要素に変換する必要があります。 2. 垂直位置合わせ: 中央この種の要素の中央揃えでは、親要素の行の高さが自身の高さと等しい必要があり、この要素はインライン ブロック要素です。 3 つの条件がすべて満たされた場合にのみ、垂直方向のセンタリングを実現できます。コードは次のとおりです。 //html <div class="main"> <div class="middle"></div> </div> //css 。主要 { 幅: 200ピクセル; 高さ: 300px; 行の高さ: 300px; 背景: #dddddd; } 。真ん中{ 背景: 赤; 幅: 200ピクセル; 高さ: 50px; display: inline-block; // または display: inline-table; 垂直位置合わせ: 中央; } この方法では固定の行の高さが必要であり、実際に達成される中央揃えは真の中央揃えではなく、近似中央揃えであることに注意してください。 3. 絶対位置と負のマージンこの方法の核となるのは、まず中央に配置する要素を絶対位置に設定し、次にその top: 50%; に要素自体の高さの負の半分に等しい margin-top を加えて中央に配置することです。利点は、実装が簡単で、親要素の高さをパーセンテージで指定でき、行の高さを設定する必要がないことです。コードは次のとおりです。 //html <div class="main"> <div class="middle"></div> </div> //css 。主要 { 幅: 60ピクセル; 高さ: 10%; 背景: #dddddd; position: relative; //親要素は相対位置に設定されます} 。真ん中{ position: absolute; //絶対位置に設定します top: 50%; //上の値は50%です margin-top: -25%; // margin-top を要素の高さの半分に設定します width: 60px; 高さ: 50%; 背景: 赤; } 4. 絶対位置と margin:autoまずコード: //html <div class="main"> <div class="middle"></div> </div> //css 。主要 { 幅: 60ピクセル; 高さ: 10%; 背景: #dddddd; position: relative; //親要素は相対位置に設定されます} 。真ん中{ 幅: 30%; 高さ: 50%; position: absolute; //絶対位置に設定します top: 0; bottom: 0; // 上と下を 0 に設定します。 left: 0; //left と right も 0 に設定すると、水平方向と垂直方向の両方の中央揃えを実現できます right: 0; マージン:自動; 背景: 赤; } この方法の利点は、垂直方向のセンタリングだけでなく、水平方向のセンタリングも実現できることです。欠点は、ネットワークやパフォーマンスが悪い場合に、ボックスが直接固定されず、ユーザーエクスペリエンスが低下する可能性があることです。 5. フレックスレイアウト フレックスレイアウトは垂直方向と水平方向の中央揃えを簡単に実現できるため、多くの利点があり、モバイル端末で広く使用されています。欠点は、ブラウザの互換性が低いことです。コードは次のとおりです。 //html <div class="main"> <div class="middle"></div> </div> //css 。主要 { 幅: 60ピクセル; 高さ: 10%; 背景: #dddddd; display: flex; //flexに設定 justify-content: center; // 水平中央 align-items: center; // 垂直中央} 。真ん中{ 幅: 30%; 高さ: 50%; 背景: 赤; } 要約する 上記は、私が紹介した CSS で垂直方向の中央揃えを実現するいくつかの方法の要約です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。 |
>>: シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。
目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...
v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...
1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...
この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...
効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...
目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...
目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...
目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...
1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...
1. Docker psはコンテナをリストします 2. Docker cpはコンテナにファイルをコピ...
目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...
さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...
少し前に、製品バージョンをテスト用にテスターに提出したのですが、テスト結果はまったく予想外のもの...
まず、Web ページのスタイルの形成は、主に Web ページのレイアウト設計、ページの色処理、画像と...