フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【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;
}

例03.jpg

とっても簡単!

解説

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

失敗例①

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

css
.box{
  text-align:center;
}

例02.jpg

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

失敗例②

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

css
.box img{
  text-align:center;
}

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

結果の解説

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

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

② margin で左右中央にする
.box img { margin : 0 auto }
例04.jpg
上の画像を見たらなんとなくわかると思いますが、margin : 0 auto を使う場合は、その要素にwidth定義が必要 です。
※ 画像は幅が決まっているものなのでわざわざwidth指定しなくても効くようです。

コメント

記事に戻る

コメントを残す