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 8.0.24 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.24バージョンのインストールと設定方法を記録し、皆さんと共有しますM...

1行のコードでLinuxのプロセスを隠す方法を学ぶ

友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...

vue-cropper コンポーネントは画像の切り取りとアップロードを実現します

この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...

MYSQL接続ポートが占有され、ファイルパスエラーが発生する問題を解決します

今朝、私は Wampserver を使用してローカルの win7 マシン上に PHP 環境を構築し、...

MySQLインデックス最適化分析に関する簡単な説明

記述した SQL クエリが遅いのはなぜですか?作成したインデックスが頻繁に失敗するのはなぜですか?こ...

複数クリックを防ぐVueの実践

通常、クリック イベントは、メッセージ リマインダーのさまざまな状況に分割されます。これらが処理され...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Linux における「/」と「~」の違いの詳細な説明

「/」はルートディレクトリ、「~」はホームディレクトリです。 Linux ストレージはツリー状にマウ...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

MySQL クエリの最適化: クエリが遅い原因と解決策

開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...

MySQLデータベースのマスタースレーブ同期構成と読み取り書き込み分離

MySQL マスター スレーブ レプリケーションを使用する利点は次のとおりです。 1. 安定性を向上...

vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...