まず実装手順について説明します。 最終結果 2. コードの実装 HTML部分 <div class="main"> <div class="タグ"> カテゴリーのヒント</div> <div class="images"> <div class="mid"> <img src="images/06.jpg" /> </div> <div class="mid"> <img src="images/05.jpg" /> </div> <div class="mid"> <img src="images/07.jpg" /> </div> <div class="mid"> <img src="images/11.jpg" /> </div> <div class="mid"> <img src="images/14.jpg" /> </div> </div> <div style="clear:both;"></div> <div style="margin-bottom:30px;"> </div> CSS部分 。主要{ 幅:100%; 上マージン:40px; } .main .tag{ マージン:0 自動; 幅:200px; フォントサイズ:18px; border-bottom:1px 実線 #878787; テキスト配置:中央; 下マージン:20px; } .main .images{ マージン:0 自動; width:1300px; //<div>ブロックのサイズを設定します。中央揃え効果を得るには計算が必要です。} .main .images .mid{ float: left; //左揃えを設定 margin: 5px; //画像の端の間隔} .main .images .mid img{ width:250px;// 標準画像の長さと幅 height:300px; } 中央のdivブロックに複数の画像を表示するには計算が必要です。幅250px、高さ300pxの画像を合計5枚使用し、各画像の端の間隔は5pxなので、 div ブロックの幅は、5 倍の 250 (px: 5 つの画像の幅) に 10 倍の 5 (px: 4 つの間隔に 2 を掛けたものと、最初の端と最後の端の合計 10 の端) を加えたもので、結果は 1300 px になります。
要約する CSS を使用して複数の画像を水平方向に中央揃えする方法についての記事はこれで終わりです。CSS を使用して画像を水平方向に中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Dockerの核となる原則であるCgroupの詳細な説明
>>: ウェブページのフラッシュアニメーションが表示されない問題の解決策
序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...
1. コマンドの紹介nl (行数) は指定されたファイルに行番号を追加し、標準出力に書き込みます。フ...
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...
背景この記事では主に、MySQL が更新ステートメントを実行するときに、元のデータと同一の (つまり...
1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...
目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
この記事の例では、カスケードセレクターを実装するためのelementUIの具体的なコードを参考までに...
一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...
目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...
サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...
目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...
Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...
次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...