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

HTML では、画像を中央揃えにする 2 つの方法があります: CSS: margin: 0 auto; を使用して画像を水平方向に中央揃えにする方法と、display: block; を使用して幅全体を占めるようにする方法です。 HTML:

要素を使用して画像を水平方向の中央に配置する方法は、柔軟性が低く、最新の Web 標準に準拠していません。

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

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

方法 1: CSS を使用します

<img  src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"   style="max-width:90%" alt="HTML Web ページで画像を中央に配置する方法" >

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

方法 2: HTML

<center><img  src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="HTML Web ページで画像を中央に配置する方法" ></center>

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

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

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

#追加のヒント

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

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