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

画像の位置合わせは、ウェブページをコーディングする際に学ぶべき重要なスキルです。残念ながら、コードの変更に伴い、一部のHTMLタグは非推奨となり、すべてのウェブブラウザで認識されなくなりました。HTMLで画像を中央に配置するには、以下の方法を試してみてください。うまくいかない場合は、カスケーディング・スタイル・シート（CSS）でコーディングすることを検討してください。

方法1

テキストで揃える

1. タグの中で「中央揃え」という言葉を使わないでください。HTMLコーディングでは、テキストを中央に配置することはできますが、画像の配置は "中央 "という言葉で識別しなければなりません。画像は線要素ではないので、他の要素との関係で識別します。
2. 新しい行を開始します。テキスト行が始まることを示すには、段落タグを使います。タグを<p>で開始し、テキストを記述する。
3. <img src="imgName.gif "と入力して画像を挿入します。次に、alt="画像の説明 "と入力して画像の説明を入れます。

   • src "セクションはウェブページに画像のURLを伝えます。
   • altセクションは、ウェブページに画像の名前を伝えます。
4. 画像の配置を指定します。align="middle">と入力すると、タグの画像部分が終わります。
5. さらにテキストを追加します。そして、</p>でタグを閉じます。<img src="dancingdogpicture.gif" alt="踊っている犬" align="middle"> サンプルは完成です。

方法2

センタータグで揃える

1. 新しい要素を作成し、その要素を中央に配置します。その中央に配置された要素の中に画像を入れることができます。ただし、要素の周りに余分なスペースができます。
2. 新しいコードを書き始めます。要素の中央揃えから始めます。<center>と入力します。
3. 画像タグを追加します。<img src="dancingdogpicture.gif" alt="踊る犬 "と入力します。
4. 画像の高さと幅を指定します。height="200 "width="200">など、お好きなサイズを入力してください。これでタグの画像部分は終わりです。
5. </center>でタグを終了します。例えば、タグ全体は次のようになります：
   <center><img src="dancingdogpicture.gif" alt="dancingdog" height="200" width="200"></center>.

この記事は、CC BY-NC-SAで公開されている「 How to Center an Image in HTML 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。