HTMLで画像を中央揃えにする方法

著者: Mark Sanchez
作成日: 6 1月 2021
更新日: 1 J 2024
Anonim
【超入門】もうCSSの真ん中寄せで悩まない!横向き編【HTML・CSS コーディング】
ビデオ: 【超入門】もうCSSの真ん中寄せで悩まない!横向き編【HTML・CSS コーディング】

コンテンツ

属性 整列 鬼ごっこ html> HTML5以降非推奨になりました。この属性はほとんどのWebブラウザーで引き続き機能しますが、カスケードスタイルシート(CSS)を使用して画像を整列することをお勧めします。この記事では、CSSと非推奨のタグを使用して画像を中央揃えにする方法を紹介します。 整列.

ステップ

方法1/2:CSS(推奨)

  1. 1 画像のHTMLコードを追加します。 カスケードスタイルシート(CSS)を使用して画像を整列しますが、HTMLを使用してページに配置する必要があります。以下はタグの使用例です img> コードに画像を挿入するには:

    img src = "dog.webp" alt = "これは犬の写真です">

    • それ以外の dog.webp 画像ファイルの名前に置き換え、「alt」の後に画像の説明を入力します。意味 中心 「クラス」の場合は、その名前でCSSクラスを作成するため、変更しないでください。
  2. 2 CSSコードを見つけます。 サイトに別のCSSファイルがある場合は、それを開きます。そうでない場合、CSSはおそらくHTMLファイルの先頭、タグ内にあります 頭>..。ファイルの先頭までスクロールしてタグを見つけます スタイル> /スタイル>.
    • タグの場合 スタイル> /スタイル> いいえ、追加します。詳細については、この記事をお読みください。
  3. 3 CSSを追加して画像を配置します。 「50%」の代わりに、別の値を入力して画像をページに表示することができます。 「100%」の値で画像を中央に配置することはできないため、この数値は異なる必要があります。

    .center {表示:ブロック;マージン左:自動;マージン右:自動;幅:50%; }

  4. 4 変更を保存します。 HTMLファイルとCSSファイル(ある場合)を保存します。これにより、画像が中央に配置されます。
    • タグの内側にも img> 追加できます 他の画像を中央に配置します。

方法2/2:HTMLの「align」属性

  1. 1 新しい段落を作成します。 画像を中央揃えにするこの方法は廃止されましたが、それでも多くのブラウザで機能します。ただし、ブラウザが指定された属性のサポートを停止した場合でも、CSSを使用してサイトの機能を維持することをお勧めします。属性を覚えておいてください 整列 画像を囲む要素の内側(たとえば、タグの内側)にのみ画像を中央揃えにします p> / p> また div> / div>)。例として、HTMLファイルで、追加して新しい段落を作成します p> 別の行に。
  2. 2 画像のHTMLコードを追加します。 タグの後に次のコードを入力します p>..。この例をガイドとして使用してください。

    p> img src = "dog.webp" alt = "picture" align = "middle">

    • それ以外の dog.webp 画像ファイルの名前に置き換え、「alt」の後に画像の説明を入力します。
    • 真ん中の属性は、ページの中央に画像を表示するようにブラウザに指示します。
  3. 3 段落タグを閉じます。 これを行うには、追加します / p> 画像タグの後。完成したコードは次のようになります。

    p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

  4. 4 変更を保存します。 これにより、画像が中央に配置されます。