画像をうまく中央寄せするには、以下のようにします。
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要素を寄せる必要がありますね。