フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は 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 の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...
目次1. スクリプトタグを使用してファイルをインポートする1. ローカルファイルをインポートする2....
最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した...
目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...
キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...
privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...
現象Apache Spark 2.x を使用すると、Spark ジョブがすべて完了しているにもかかわ...
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...