Div 基本レイアウト <div class="main"> <div class="center"></div> </div> CSS スタイル 1. 座標位置とマージン: 自動 親要素に相対的な位置付けを追加し、子要素に絶対的な位置付けを追加します。 。主要{ 幅: 300ピクセル; 高さ: 300px; 背景色: 赤; 位置: 相対的; } 。中心{ 幅: 100ピクセル; 高さ: 100px; 背景色: スカイブルー; 位置: 絶対; 左: 0; 右: 0; 上: 0; 下部: 0; マージン: 自動; } 2. フレックス レイアウトを使用して、コンテンツを水平方向と垂直方向に中央揃えします。 。主要{ 幅: 300ピクセル; 高さ: 300px; 背景色: 赤; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } 。中心{ 幅: 100ピクセル; 高さ: 100px; 背景色: 緑黄色; } 3. position:absoluteとtransformを使用する ここで覚えておく必要があるのは、変換でパーセンテージが使用される場合、それは親ボックスではなく、それ自体の長さと幅に相対的であるということです。 。主要{ 幅: 300ピクセル; 高さ: 300px; 背景色: 赤; 位置: 相対的; } 。中心{ 幅: 100ピクセル; 高さ: 100px; 背景色: ピンク; 位置: 絶対; 左: 50%; 上位: 50%; 変換: translateX(-50%) translateY(-50%); } 4. ポジショニングとマイナスマージン サブボックスの長さと幅が固定されている場合にのみ適しています 。主要{ 幅: 300ピクセル; 高さ: 300px; 背景色: 赤; 位置: 相対的; } 。中心{ 幅: 100ピクセル; 高さ: 100px; 背景色: ピンク; 位置: 絶対; 左: 50%; 上位: 50%; 左マージン: -50px; 上マージン: -50px; } 5.display:テーブルセル display:table-cell; と vertical-align:middle は、子ボックスを数値の方向に中央揃えするために使用されます。 margin:auto; は子ボックスを水平方向に中央揃えします。ボックスを一方向にのみ中央揃えにしたい場合は、もう一方のボックスを削除します。 。主要{ 幅: 300ピクセル; 高さ: 300px; 背景色: 赤; 表示: テーブルセル; 垂直位置合わせ: 中央; } 。中心{ 幅: 100ピクセル; 高さ: 100px; 背景色: #000; マージン: 自動; } CSSを使用してサブ要素divを水平および垂直に中央揃えする例についての記事はこれで終わりです。CSSを使用してサブ要素divを水平および垂直に中央揃えする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて参照してください。今後とも123WORDPRESS.COMを応援してください。 |
<<: HTMLを使用して、IPを制限する投票ウェブサイトの不正行為スキームを実装する
>>: VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します
目次1. データベース操作1.1 データベースの表示1.2 データベースを作成する1.3 データベー...
この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...
私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...
まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...
目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...
1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...
この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...
MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...
インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...
1. css: ドラッグテーブル.css @charset "UTF-8"; ....
[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...
1. インストールヒント: 現在、VUE3.0 の公式翻訳ドキュメントはありません。しかし、すでに誰...
Mysqldump は MySQL の論理バックアップに使用されます。高速ではありませんが、柔軟性が...
背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...