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

Web デザインでは、画像の使用がますます一般的になってきていますが、画像をページの中央に配置する方法はよく尋ねられる質問です。

画像を Web ページの中央に表示するには、HTML と CSS コードを使用して実現する必要があります。次に、具体的な手順を見ていきましょう。

1. HTML コードで画像を設定する

Web ページに画像を追加するには、HTML コードを使用する必要があります。次のコードを使用して画像を追加できます。

<img src="图片地址" alt="图片描述">

このうち、src 属性は画像のアドレスを表し、alt 属性は説明を表します。写真の。画像を表示できない場合、ブラウザは alt 属性の内容を表示します。

コードでは、CSS スタイルを使用して画像のサイズと位置を制御できます。

2. CSS コードを使用して画像の幅と高さを設定します

CSS コードでは、width と height を使用できます。 画像のサイズを制御するプロパティ。例:

img {
  width: 50%;
  height: auto;
}

このコードは、画像の幅をページ幅の 50% にし、高さはそれに比例して自動的に調整されます。

3. CSS コードを使用して画像の配置を設定します

画像を中央に表示するには、text-align 属性を使用して、画像の水平方向の配置を設定します。例:

body {
  text-align: center;
}

img {
  display: inline-block;
  margin: auto;
}

このコードは、すべての要素をページの中央に配置し、display 属性を使用して画像をインライン ブロック レベルの要素として設定し、margin# を使用します。 # #property は、画像をページの中央に垂直に配置します。

これらの単純な HTML と CSS コードを使用して、画像を Web ページの中央に配置できます。もちろん、これは方法の 1 つにすぎず、画像の位置合わせを行う方法は他にもたくさんあります。ただし、この方法は比較的シンプルで実用的であり、初心者が学習して使用するのに適しています。

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