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

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

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

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

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

このうち、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で画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。