HTMLで画像を中央に配置する方法

HTML 言語は Web デザインと開発に不可欠な部分であり、Web ページに不可欠な要素の 1 つとして画像も広く使用されています。ただし、画像を挿入すると、その画像が Web ページの中央に配置されない場合があり、これは明らかにデザイン効果に影響します。では、画像を中央に配置するにはどうすればよいでしょうか?

画像を中央に配置するには、HTML コードと CSS スタイルの知識を習得する必要があります。以下で詳しく見ていきましょう。

方法 1: HTML コードを使用する

Web ページでは、HTML 言語を使用して、画像が中央に配置されるように位置を制御できます。具体的な実装方法は以下の通りです。

1. HTML内にpicture要素を作成します。例:

<img  class="center lazy" src="/static/imghwm/default1.png" data-src="图片路径" alt="HTMLで画像を中央に配置する方法" >

2. class属性に「center」スタイルを追加します。 。スタイルは HTML ファイルに直接追加することも、CSS ファイルのクラス セレクターを使用して追加することもできます。次のように:

HTML ファイル内:

<style>
    .center {
        display: block;
        margin: auto;
    }
</style>

CSS ファイル内:

.center {
    display: block;
    margin: auto;
}

方法 2: CSS スタイルを使用する

CSS スタイル画像を中央に配置する一般的な方法の 1 つは次のとおりです。

1. img タグにラッピング レイヤを追加します。

<div>
  <img  src="/static/imghwm/default1.png" data-src="图片路径" class="lazy" alt="HTMLで画像を中央に配置する方法" >
</div>

2. CSS ファイルのラッピング レイヤーにスタイルを追加します。

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

上記のコードでは、display: flex; は Web ページのコンテンツ レイアウトを Flex レイアウトに変更するために使用され、justify-content: center; は画像を水平方向に中央揃えするために使用され、align-項目: 中央; 画像を垂直方向に中央に配置するために使用され、高さ: 100%; 画像の高さを調整するために使用されます。

上記のコードをより具体的かつ直感的にするために、以下の例を通してさらに詳しく学習します。

例 1:

まず、次のコードを HTML ファイルに追加します。

nbsp;html>

   
      <meta>
      <title>图片水平居中</title>
      <style>
         #centerImage {
            display: block;
            margin: 0 auto;
         }
      </style>
   
   
      <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/42/400/400" class="lazy" alt="HTMLで画像を中央に配置する方法" >
   

上記のコードでは、画像は div 要素にあり、id div のは "centerImage" です。 CSS スタイル シートでは、「display: block;」を使用します。このスタイルは画像をブロック要素に変換でき、「margin: 0 auto;」形式は画像を水平方向に中央揃えにできます。これらのスタイルを画像のラッピング レイヤーに入れると、画像を水平方向に中央揃えにすることができます。

例 2:

HTML コード:

nbsp;html>

   
      <meta>
      <title>图片垂直水平居中</title>
      <style>
         .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
         }
         img {
            border: 1px solid #ccc;
         }
      </style>
   
   
      <div>
         <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/123/400/400" class="lazy" alt="HTMLで画像を中央に配置する方法" >
      </div>
   

このコード スニペットでは、ラッピング レイヤー div を作成し、Flex レイアウトを使用して CSS スタイル シートにスタイルを追加します。が使用され、「justify-content: center;」は画像を水平方向に中央揃えするために使用され、「align-items: center;」は画像を垂直方向に中央揃えするために使用されます。 「height: 100vh;」属性は、画像の高さに適応するために使用されます。

要約:

画像を中央に配置することは些細なことのように思えるかもしれませんが、実際の開発や設計では、これは非常に重要で一般的な問題です。この記事では、画像を中央に配置する方法として、HTML タグと CSS スタイルを使用する方法と、CSS スタイルを使用する 2 つの方法を紹介します。それぞれの方法には独自の長所と短所があり、プログラマーは実際の状況に応じて適切な方法を選択して、Web デザインの美しい効果を実現できます。

以上がHTMLで画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。