要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法

まず、コード ブロックを示します。すでにコードを理解していれば、まずは自分で試してみることができます。

 position:fixed; /*中央に配置したい要素を設定します*/
 left:50%; /*または right:50%*/
 top:50%; /*または bottom:50%*/
 margin-left:-要素の幅の半分; /*または margin-right*/
 margin-top:要素の高さの半分; /*または margin-bottom*/

では、次は試してみましょう!

<ヘッド>
    <メタ文字セット="UTF-8">
    <スタイル>
    /*ボックスはページ全体ではなくブラウザウィンドウの中央に配置されているため、ページを上下にスライドすると、
    ボックス要素は移動できないため、ここで box_compare 要素が参照として設定され、その高さがウィンドウの高さを超え、ページにスクロールバーが表示されます*/
        .box_compare {
            幅: 100%;
            高さ: 1000ピクセル;
            背景: スカイブルー;
        }
        
        。箱 {
         /*要素の幅と高さを設定します*/
            幅: 500ピクセル; 
            高さ: 300px;
            背景: 青;
            位置: 固定;
            left: 50%; /*要素の左端はウィンドウの左側からの距離の 50% です*/
            top: 50%; /*要素の上端はウィンドウの上端からの距離の 50% です*/
            上マージン: -150px;
            左マージン: -250px;
        }
    </スタイル>
</head>

<本文>
    <div class="box_compare"></div>
    <div class="box"></div>
</本文>

上記の方法は実は欠点があり、要素の幅が設定されていない場合は使用できません。位置決め要素を追加した後、幅を設定していない要素の幅はコンテンツによって引き伸ばされるため、この方法は使用できません。ここでは、誰にとってもより簡単な方法を紹介します。

position: fixed; /*中央に配置したい要素を設定します*/
左: 0;
右: 0;
上: 0;
下部: 0;
マージン: 自動;

この方法、なぜ left: 0; right: 0; かつ top: 0; bottom: 0; なのか理解できない生徒もいるかもしれません。目的は、これを自由な要素にすることです。このとき、要素の幅と高さは、設定されていない場合はデフォルトで親要素と同じになります。次に、margin: auto; を使用してブラウザウィンドウの中央に配置します。そうしないと、固定の要素に margin: auto; を使用するのは無効です。
わかりました。もう一度試してみましょう。

<ヘッド>
<メタ文字セット="UTF-8">
 <スタイル>
  /*box_compare は上記と同じ比較機能を持ちます*/
     .box_compare {
        幅: 100%;
           高さ: 1000ピクセル;
           背景: スカイブルー;
     }
     。箱 {
           幅: 60%;
           高さ: 300px;
           背景: 青;
           位置: 固定;
           左: 0;右: 0;
           上: 0;下: 0;
           マージン: 自動;
      }
     </スタイル>
</head>
<本文>
     <div class="box_compare"></div>
     <div class="box"></div>
</本文>

上記の方法は、Web ページを作成するときに広く使用されています。学生の皆さんはもっと練習してください。ブラウザ ウィンドウ内で要素を中央に配置する方法を学習しました。次に、親要素内で要素を中央に配置するにはどうすればよいでしょうか。学生さんたち自身で考えてみてもいいと思いますが、次号で紹介します!

これで、要素を中央に配置するための配置方法(Web ページ レイアウトのヒント)に関するこの記事は終了です。要素を中央に配置するためのページ配置に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL 8.0 再帰クエリの簡単な使用例

>>:  Vueはアコーディオン効果を実装する

推薦する

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

MySQL にテキストと画像を保存する方法

Oracle の大きなテキスト データ型 Clob 長いテキスト型 (MySQL ではサポートされて...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...

コード分​​析を実現するためのFastDFSとNginxの統合

FastDFSとNginxの統合:トラッカーは、負荷分散と高可用性のために Nginx と組み合わせ...

js の toString メソッドの 3 つの機能

目次1. toStringメソッドの3つの機能2. オブジェクトを表す文字列を返す3. カスタム t...

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

PostgreSQL正規表現の一般的な機能の概要

PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...

最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

vue+canvasでタイムラインを描く方法

この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...