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の詳細な説明

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

推薦する

Vue3 の父子値転送に関する簡単な説明

目次父から息子へ: 1. 親コンポーネントのサブコンポーネントタグに、サブコンポーネントに渡されるデ...

MLSQLコンパイル時権限制御例の詳細な説明

序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

中国の専門ではない:文化の違いの中でのウェブ開発

Web デザインと開発は大変な作業なので、少数の人だけを対象に設計しないでください。これは外国人が...

コンパイル/サーバーなしでブラウザにCommonJSモジュールを実装する

目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....

Dockerコンテナのタイムゾーン調整操作

Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...

DockerでMongoDBコンテナをデプロイする方法

目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....

Tomcatソースコードをideaにインポートする方法

目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...

SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。

背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...

Ubuntu で時刻同期に NTP を使用する

NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...