【1】中央の要素の幅と高さを知る 絶対値 + 負のマージン コードの実装 .wrapBox5{ 幅: 300ピクセル; 高さ: 300px; border:1px 赤一色; 位置: 相対的; } .wrapItem5{ 幅: 100ピクセル; 高さ: 50px; 位置: 絶対; 背景:黄色; 上位: 50%; 残り:50%; 上マージン: -25px; 左マージン: -50px; } 運用結果 絶対 + マージン 自動 コードの実装 .wrapBox{ 幅: 300ピクセル; 高さ: 300px; 背景: 黄色; 位置: 相対的; } .wrapItem{ 幅: 100ピクセル; 高さ: 50px; 背景:緑; 表示: インラインブロック; 位置: 絶対; 上: 0px; 下:0px; 左: 0px; 右: 0px; マージン:自動; } 絶対値 + 計算 コードの実装 .wrapBox6{ 幅: 300ピクセル; 高さ: 300px; border:1px 緑一色; 位置: 相対的; } .wrapItem6{ 幅: 100ピクセル; 高さ: 50px; 位置: 絶対; 背景:黄色; 上: calc(50% - 25px); 左:calc(50% - 50px); } 運用結果 3つの比較のまとめ 中央に配置された要素の幅と高さがわかっている場合、中心を設定する方法は比較的簡単です。 3 つの方法の本質は同じです。いずれも、中央に配置された要素に対して絶対的な配置を実行します。上部に 50%、左側に 50% 配置した後、中央に配置された要素の幅と高さの半分に引き戻され、真の中央配置が実現されます。 3 つの方法の違いは、要素自体の幅と高さを引き戻す方法の違いにあります。 【2】中央の要素の幅と高さが不明 絶対 + 変換 コードの実装 .wrapBox{ 幅: 300ピクセル; 高さ: 300px; 背景:#ddd; 位置: 相対的; } .wrapItem{ 幅: 100ピクセル; 高さ: 50px; 背景:緑; 位置: 絶対; 上位: 50%; 残り:50%; 変換: translate(-50% , -50%); } 運用結果 原理は、幅と高さがわかっている場合の実装方法と似ていますが、現在中央にある要素の幅と高さは不明であるため、現在中央にある要素の幅と高さを自動的に取得する必要がある点が異なります。 translate 属性はまさにこの機能を実装します。 利点と欠点 利点: 幅と高さを独自に自動的に計算します。 欠点: transform の他のプロパティを同時に使用すると、相互に影響を及ぼします。 フレックスレイアウト .wrapBox2{ 幅: 300ピクセル; 高さ: 300px; 背景: 青; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } /*注: 子要素を行ブロック要素として設定しない場合でも、単一のレイヤーを占有することはありません*/ .wrapItem2{ 幅: 100ピクセル; 高さ: 50px; 背景:緑; } 運用結果 原則: 親要素をフロー レイアウトに設定し、フレックス レイアウトのプロパティ特性に従って子要素を中央に設定します。 利点と欠点 利点: フレックス レイアウトは柔軟性があり、子要素の設定を必要としません。 欠点: 互換性。子要素のfloat、clear、position等が使えません。他のレイアウトも存在する場合、影響が出やすいです。 テーブルセルレイアウト コードの実装 .wrapBox3{ 幅: 300ピクセル; 高さ: 300px; 背景: 黄色; 表示: テーブルセル; 垂直位置合わせ: 中央; テキスト配置: 中央; } .wrapItem3{ 幅: 100ピクセル; 高さ: 50px; 背景:緑; 表示: インラインブロック; } 運用結果 原則: テーブルの vertical-align プロパティに従って、要素をテーブル要素内で中央に配置するように設定し、次に text-align に従って水平方向の中央を設定できます。 表の要素 コードの実装 .tableBox{ border:2px 実線黄色; 幅: 300ピクセル; 高さ: 300px; } .tableBox テーブル{ 幅:100%; 高さ:100%; } .centerWrap{ テキスト配置: 中央; 垂直位置合わせ: 中央; } .centerアイテム{ 表示: インラインブロック; 背景:ピンク; } 運用結果 まとめると、テーブルタグは主に vertical-align 属性と text-align 属性を使用してレイアウトに使用されます。ただし、以前の方法と比較すると、テーブル タグを使用すると冗長なコードが大量に生成されます。推奨されません CSS で要素を垂直方向に中央揃えする 7 つの方法についての記事はこれで終わりです。CSS で要素を垂直方向に中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)
【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...
早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
PS: 最近、nginx を詳細に紹介している <<High-Performance ...
注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...
序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...
1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...
Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...
この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...
プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...
MySQL トランザクション分離レベルを表示する mysql> '%isolation...
ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...
目次1. 概要1. 説明文テスト2. 結果の各列の説明2. ID列の説明1. 環境整備2. expl...