画像を簡単に中央寄せする

text-align属性で中央寄せ

まず先に紹介した「text-align属性で中央寄せ」ですが、例えば以下のようなhtmlの場合があります。

<div>
<p><img src="画像のパス" alt="画像の代替文" /></p>
<p>サンプルテキスト。サンプルテキスト</p>
</div>

このとき、CSSは以下のようになりますね

div p{
text-align:center;
}

しかし、これだと、画像の下の<p>サンプルテキスト。サンプルテキスト</p>まで中央によってしまいます。これを避けるには、img要素を括っているp要素にid/classを設定しなくてはなりません。

display属性とmargin属性を使う

こういうケースで、画像をうまく中央寄せするには、以下のようにします。

div p img{
display:block;
margin:auto;
}

また、左寄せにしたい場合と右寄せにしたい場合はそれぞれ以下のようにします

/*右寄せにする*/
div p img{
display:block;
margin-left:auto; 
}

/*左寄せにする*/
div p img{
display:block;
margin-right:auto; 
}

この時注意しなくてはいけないのは、右あるいは左寄せをする場合、寄せたい方向と反対側のmarginをautoにすることです。

また、img要素をdisplay属性を"block"にしてブロック要素に変えておくことを忘れないようにしましょう。img要素はインライン要素ですので、そのままではmarginがうまく機能しません。ちなみに、画像をblockにしてしまうと、基本的にtext-align属性は効かなくなります（但し、古いブラウザですと、ブロック要素にもtext-align属性を適用してしまうこともあります）。

もうひとつ付け加えておくと、これらはfloat属性とは異なり、文章を回り込ませることはできません。回り込ませたいときは、float属性とclearfixを使ってimg要素を寄せる必要がありますね。