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

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

推薦する

CSS3 で QR コードスキャン効果を実装する例

オンラインプレビューhttps://jsrun.pro/AafKp/まず効果を見てみましょう:最初の...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

Webサービスのリモートデバッグとタイムアウト動作原理の分析

Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

MySQL スロークエリログの有効化と設定

導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...

ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...

Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

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

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

ウェブデザインにおけるカラーマッチングの優れた例30選

本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...

マインスイーパゲームを実装するための jQuery プラグイン (1)

この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...