HTMLを使用してWebページの画像を中央揃えにする方法

必ずしも難しいことではありませんが、Webページ上の画像を中央に配置する方が、想像以上に複雑になる可能性があります。 主な理由は tagはインライン要素なので、ブロックレベルの要素とは動作が異なります。 HTMLを使用するアプローチもあります。 他の人たちはCSSを使っていますし、他の人たちは非推奨ではないという点で他の人たちより "より適切である"と考えられています。 続行するには、以下のリストから方法を選択して指示に従ってください。

HTML5でのサポートのためには、ブロックレベルの要素の中でtext-align:centerの値を持つstyle属性を使うべきです。 など タグ

HTMLコードの例

ヒント:上の図のようにインラインスタイルを追加するのは1回だけです。複数の画像を中央に配置する必要がある場合は、以下の提案を使用してCSSクラスを作成してください。

上記のコードを使用したイメージセンターの例

ブロックレベルの要素への変換

画像を正しく中央揃えにする方法の1つは、 ブロックレベルの要素としてのelement これを行うには、ページの先頭(次の例に示す)またはリンクされた外部CSSファイルにルールを追加します。

HTMLコードの例

 .centerImage {text-align:center; 表示ブロック; } 

このコードでは、 centerImageクラスを次のコードに適用できます。 ブロックレベルの要素に入れ子にする必要はありません。 この方法は複数の画像に対して機能します。

中央揃えの画像コードの例

タグを使う

を囲むことで写真を中央に配置できます。 タグを付ける タグ このアクションは、それだけを中心にWebページ上の画像を中心に配置します。 このメソッドはHTML 5では推奨されておらず、今後すべてのブラウザで動作するとは限りません。 画像を中央に配置しようとしているときに上記の他の方法がうまくいかない場合にのみ、この方法を使用することをお勧めします。

HTMLコードの例