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

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

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

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

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

手順:

1. HTML に画像を挿入:

<img src="图片路径" 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="图片路径" alt="图片描述">
    
  

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

  

    

      <img src="图片路径" alt="图片描述">
    
  

説明:

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

  要素に画像を追加すると、 要素が中央に表示されます。 方法 3: HTML5 タグを使用して画像を中央に配置する HTML5 では、 、 、