【css】テキストは左揃え、画像は中央ぞろえにしたいときの方法【初心に返ろう】

自分にびっくりした話

テキストは左揃え、画像は中央ぞろえにしたいときってどうすればいいの・・・？
これ、基本的なやつのはずなんだけどなぜか数か月前にやり方がわからなくなって調べました。
おかしいな、今までの自分はどうやってたんだろう・・・？

結果から

以下のように、imgタグにcssで display:block; と **margin:0 auto;**を入れるだけ。

HTML

<div class="box">
  <p><img src="jyuyo-img.jpg"></p>
  <p>すごく重要な画像</p>
</div>

CSS

.box{
  background:#f9e6e4;
  width:300px;
}
.box img{
  display:block;
  margin:0 auto;
}

とっても簡単！

解説

例えばこの黄色いボックスを例にします。

失敗例①

たくさんある画像を真ん中に表示させたい。
そう思ったときに多くの人が一番最初に思いつくのが text-align:center; です。
そんなわけで単純にこうすると・・・

css

.box{
  text-align:center;
}

全部真ん中に寄っちゃいます。
text-align プロパティはインラインレベルのコンテンツの行ぞろえを指定するものです。
そしてテキストもimgもインラインレベルのコンテンツなのです。

失敗例②

text-align プロパティは指定したいコンテンツの親要素にかけないといけないのでこれもダメです。

css

.box img{
  text-align:center;
}

何も起きません。期待してこれやったらイラっとします。

結果の解説

では、「結果から」 では何が起きているのか？

① 文字 ⇒ インラインレベル、img ⇒ ブロックレベル に差別化する
.box img { display : block; }

② margin で左右中央にする
.box img { margin : 0 auto }

上の画像を見たらなんとなくわかると思いますが、margin : 0 auto を使う場合は、その要素にwidth定義が必要 です。
※ 画像は幅が決まっているものなのでわざわざwidth指定しなくても効くようです。