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 無人インストールの詳細なプロセスを実装します
この記事では、主に html + css を使用してサラウンド リフレクション ローディング エフェ...
今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...
1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...
この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...
この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...
目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...
導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...
この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...
この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考...
この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...
1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...