HTML Web ページで画像を中央に配置する方法

HTML では、画像を中央揃えにする 2 つの方法があります: CSS: margin: 0 auto; を使用して画像を水平方向に中央揃えにする方法と、display: block; を使用して幅全体を占めるようにする方法です。 HTML: <center> 要素を使用して画像を水平方向の中央に配置する方法は、柔軟性が低く、最新の Web 標準に準拠していません。

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

HTML では、画像を中央に配置する主な方法が 2 つあります。画像の中央揃え:

方法 1: CSS を使用します

<code class="html"><img src="image.jpg" style="margin: 0 auto; display: block;"></code>

• margin: 0 auto; 画像を水平方向に中央揃えにします。
• display: block; 画像をブロック要素として表示し、利用可能な幅全体を占めるようにします。

方法 2: HTML

<code class="html"><center><img src="image.jpg"></center></code>

• <center> 要素を使用して、画像などのコンテンツを水平方向に中央揃えにします。 。

適切な方法を選択してください

• CSS 方法を使用すると、余白を制御したりプロパティを表示したりできるため、より柔軟になります。最新の Web 標準にも準拠しています。
• HTML の使用は簡単ですが、柔軟性が低く、最新の Web 標準に準拠していません。

#追加のヒント

画像の高さと幅が明確であることを確認してください。
• 画像を垂直方向の中央に配置したい場合は、CSS の
• margin-top プロパティと margin-bottom プロパティを使用します。
ブロック要素 (画像など) 内のテキストを水平方向および中央揃えにする CSS の
• text-align プロパティについて説明します。

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