画像をセンタリング(中央揃え)するCSS2つ
コンテンツ内の画像を横幅に対してセンタリング(中央揃え)する場合、text-align: center;
やmargin: 0 auto;
が使われます。それぞれ指定する場所が違ったりして、少しややこしいところがあるので、備忘録として使い方をまとめておきます。
sponsored link
imgタグをブロック要素にしてセンタリングする
imgタグ内にはほとんどの場合、class="photo"
などとクラスが付けられていると思います。通常imgタグはインライン要素になるので、マージンやパディングが効きません。そこでimgタグのクラスにdisplay: block;
と指定してブロック要素にして、margin: 0 auto;
とすることで上下はマージンなし、左右(水平方向)のマージンを均等に取ることによってセンタリングすることができます。
1 2 3 |
<p> <img src="http://placehold.jp/150x100.jpg" width="150" height="100" class="photo"> </p> |
1 2 3 4 5 6 |
.photo { display: block; margin: 0 auto; margin-left: auto;/*これでもOK*/ margin-right: auto;/*これでもOK*/ } |
親要素になるブロックにスタイルを当てる
imgタグはインライン要素なので基本的にブロック要素である、pタグやdivタグなどで囲みます。この時にブロック要素にクラスを付けてあげて、text-align: center;
と指定すると、その中にあるインライン要素をセンタリングすることができます。
1 2 3 |
<p class="tac"> <img src="http://placehold.jp/150x100.jpg" width="150" height="100"> </p> |
1 2 3 |
.tac { text-align: center; } |
水平方向の揃え方を指定するプロパティです。
このプロパティをブロックレベル要素(または表のセル)に指定すると、その中に含まれるインライン要素(テキストや画像等)を「左」「中央」「右」などに揃えることができます。
ブログなどの投稿部分ではimgタグに共通のクラスを付けておいて、スタイルシートから一括で管理できるようにするのがいいと思います。(画像を貼り付けた時に自動でクラスが付けられていると思うので、HTMLを修正することもほとんどないはずです)
親要素にクラスを付けるパターンを使う場合は、.tac
というような汎用クラス(text-align: center;だけを指定するような使う場所に依存しないようなクラス)を使用するのではなく、.center-img
のような用途を限定したクラス名を付けた方が管理がしやすくなると思います。いずれにしても、クラスを増やしすぎるとページ数が増えるごとに管理がしにくくなってくるので、パターンを決めてしまった方がいいですね。