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="图片描述">
    

説明:

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

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

HTML5 では、23c3de37f2f9ebcb477c4a90aac6fffd、2f8332c8dcfd5c7dec030a070bf652c3、c787b9a589a3ece771e842a6176cf8e9、a54a1e195af9b09093af558a95fa7e2c タグと 614eb9dc63b3fb809437a716aa228d24 タグを使用して画像を作成します:

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

2. CSS でスタイルシートの 24203f2f45e6606542ba09fd2181843a タグと a1f02c36ba31691bcfe87b2722de723b タグのスタイルを設定します:

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

img {
  display: block;
}

説明:

• 24203f2f45e6606542ba09fd2181843a タグは独立したブロックを作成します。キャプションは 614eb9dc63b3fb809437a716aa228d24 要素に追加できますが、a1f02c36ba31691bcfe87b2722de723b 要素は画像の実際のマークアップです。
• CSS スタイル シートは、24203f2f45e6606542ba09fd2181843a 要素をテーブルとしてレンダリングし、水平方向の中央に配置するようにブラウザーに指示します。

概要

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

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