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

HTML (Hypertext Markup Language) は、Web ページを作成するための基本的な言語の 1 つです。 Web インターフェイスのデザインでは画像がよく使用されますが、HTML の中央に画像を配置するにはどうすればよいでしょうか?

次の 3 つのメソッドは、それぞれ CSS、HTML テーブル、HTML5 タグを使用して実装されています。

方法 1: CSS を使用して画像を中央に配置する

CSS の margin プロパティを使用して、画像を垂直方向と水平方向の中央に配置できます。

手順:

1. HTML に画像を挿入:

<img src="/static/imghwm/default1.png"  data-src="图片路径"  class="lazy" alt="图片描述">

2. CSS ファイルで img 要素のスタイルを設定します

img {
  display: block;
  margin: 0 auto;
}

説明:

• display: block; 画像を水平方向の中央に配置できるように、画像をブロックレベルの要素に変換します。
• margin: 0 auto; 画像のマージンを設定するために使用されます。左右のマージンが auto に設定されている場合、画像はコンテナ内で水平方向の中央に配置されます。

方法 2: HTML table を使用して画像を中央に配置する

HTML table 要素と align 属性を使用して、画像を垂直方向および水平方向の中央に配置できます。

手順:

1. HTML でテーブルを作成します:

      <img src="/static/imghwm/default1.png"  data-src="图片路径"  class="lazy" alt="图片描述">
    

2. テーブルの align 属性は「center」に設定されます:

      <img src="/static/imghwm/default1.png"  data-src="图片路径"  class="lazy" alt="图片描述">
    

説明:

• 要素の align 属性は、内部コンテンツの垂直方向および水平方向の配置を設定するために使用されます。
• align 属性を「center」に設定して、 要素内にネストされている
  要素に画像を追加すると、 要素が中央に表示されます。

  方法 3: HTML5 タグを使用して画像を中央に配置する

  HTML5 では、

  、

  、

  、 と 。 CSS または HTML5 タグを使用して、画像を垂直方向と水平方向の中央に配置できます。

  手順:

  1. HTML で

     タグと

     タグを使用して画像を作成します:

  
    <img src="/static/imghwm/default1.png"  data-src="图片路径"  class="lazy" alt="图片描述">
    
  图片标题
  

  2. CSS でスタイルシートの

     タグと タグのスタイルを設定します:

  figure {
    display: table;
    margin: 0 auto;
  }
  
  img {
    display: block;
  }

  説明:

  • タグは独立したブロックを作成します。キャプションは

    要素に追加できますが、 要素は画像の実際のマークアップです。

  • CSS スタイル シートは、

    要素をテーブルとしてレンダリングし、水平方向の中央に配置するようにブラウザーに指示します。

  概要

  CSS、HTML テーブル、HTML5 タグを使用すると、Web デザインで画像を垂直方向と水平方向にセンタリングする効果を実現できます。実際の状況に応じて最適な方法を選択できます。

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