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

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

推薦する

Linuxの一般的なコマンドでLinuxのmoreコマンドを使用する方法

more は、最もよく使用されるツールの 1 つです。最も一般的な使用方法は、出力コンテンツを表示し...

JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...

Typescriptを使用してWeChatミニプログラムでプロジェクトを作成する方法

プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...

Apache Tika を使用してファイルが破損しているかどうかを検出する方法

Apache Tika は、さまざまな形式のファイルからファイル タイプを検出し、コンテンツを抽出す...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

mysql5.7.19 winx64 インストールおよび構成方法のグラフィック チュートリアル (win10)

mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...

モバイルフロントエンド適応ソリューション(概要)

ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> につい...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...