CSSを使用して複数の画像を中央に水平に表示する方法

CSSを使用して複数の画像を中央に水平に表示する方法

まず実装手順について説明します。

最終結果

これが最終的な効果です

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 になります。

アイデア: 大きな div ブロックに小さな div ブロックが含まれ、小さな div ブロックは画像​​を保持するために使用されます。大きな div ブロックの幅は画像のサイズに応じて計算され、中央に複数の画像を表示できます。

要約する

CSS を使用して複数の画像を水平方向に中央揃えする方法についての記事はこれで終わりです。CSS を使用して画像を水平方向に中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Dockerの核となる原則であるCgroupの詳細な説明

>>:  ウェブページのフラッシュアニメーションが表示されない問題の解決策

推薦する

MySQLデータベースの一般的な最適化操作のまとめ(経験共有)

序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...

Linux nlコマンドの使い方

1. コマンドの紹介nl (行数) は指定されたファイルに行番号を追加し、標準出力に書き込みます。フ...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

MySQL は、元のデータと同じデータがある場合、更新ステートメントを再度実行しますか?

背景この記事では主に、MySQL が更新ステートメントを実行するときに、元のデータと同一の (つまり...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

K8Sの高度な機能を理解するための記事

目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...

MySQLトリガーの簡単な使用例

この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...

ElementUIはカスケードセレクタを実装します

この記事の例では、カスケードセレクターを実装するためのelementUIの具体的なコードを参考までに...

Reactマウスの複数選択機能の設定方法

一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...

MySQL Group by最適化の詳細な説明

目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...

Tomcat の構成と最適化ソリューションの詳細な説明

サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...

Js の継承とプロトタイプチェーンを理解するのに役立つ記事

目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...