目次
はじめに：画像が中央に配置されない理由
HTMLで画像を表示した際、
- 画像が左に寄ってしまう
- 中央にしたつもりなのに動かない
- 方法が多すぎてどれが正解か分からない
と悩んだことはありませんか？
画像の中央寄せは一見簡単そうですが、
imgタグの性質や CSSの指定方法を理解していないと
思った通りに配置できません。
この記事では、
HTML初心者が混乱しやすい
画像を中央寄せする正しい方法を
基本から順に解説します。
imgタグはインライン要素である
まず重要なのは、
imgタグはインライン要素であるという点です。
インライン要素は、
- widthやmargin:autoが効かない
- 親要素のtext-alignの影響を受ける
という特徴があります。
この性質を理解することが、
画像中央寄せの第一歩です。
方法①：text-alignを使って中央寄せする
最も簡単な方法が、
親要素に text-align: center; を指定する方法です。
<div class="img-wrap">
<img src="sample.jpg" alt="サンプル画像">
</div>.img-wrap {
text-align: center;
}特徴
- 初心者に分かりやすい
- インライン要素向け
- レイアウト制御には不向き
方法②：display:block + marginで中央寄せ
より実務向きなのが、
imgを ブロック要素にして中央寄せする方法です。
img {
display: block;
margin: 0 auto;
}ポイント
- margin:auto はブロック要素で有効
- width指定と相性が良い
- 最も汎用性が高い
実務ではこの方法がよく使われます。
方法③：flexboxで中央寄せする
レイアウト全体を制御したい場合は、
flexboxが便利です。
.img-wrap {
display: flex;
justify-content: center;
}特徴
- 横並びレイアウトにも対応
- 複数要素を中央寄せできる
- モダンなCSS手法
方法④：gridを使った中央寄せ
CSS Gridを使うと、
非常にシンプルに中央寄せできます。
.img-wrap {
display: grid;
place-items: center;
}gridは上下左右の中央寄せにも対応でき、
デザイン性の高いレイアウトに向いています。
中央寄せできないときの原因
画像が中央寄せされない場合、
次の点を確認してください。
- imgがインライン要素のまま
- widthが指定されていない
- CSSが正しく読み込まれていない
- 親要素の指定が間違っている
多くの場合、
displayと親要素の理解不足が原因です。
レスポンシブ対応時の注意点
スマホ対応では、
中央寄せとあわせて サイズ調整 も重要です。
img {
max-width: 100%;
height: auto;
}これを指定することで、
- 画面幅に合わせて縮小
- 比率を保ったまま表示
が可能になります。
よくある間違い
初心者がやりがちな例を整理します。
- brで中央に見せようとする
- 空白文字で位置調整する
- positionで無理やり調整する
これらは一時的に見えても、
レスポンシブで崩れる原因になります。
中央寄せ方法の使い分け基準
迷ったときは、次を目安にしましょう。
- 単純な中央寄せ → display:block + margin:auto
- 文章と一緒 → text-align:center
- レイアウト制御 → flexbox
- 上下左右中央 → grid
まとめ：img中央寄せはCSSで正しく行う
画像の中央寄せは、
HTMLとCSSの役割を理解すれば難しくありません。
- imgはインライン要素
- margin:autoはブロック要素向け
- 親要素の指定が重要
この基本を押さえることで、
画像配置のトラブルは大きく減ります。
初心者の方は、
まず display:block + margin:0 auto を
基準に覚えるのがおすすめです。
ぜひ実際の制作で試してみてください。