CSSで画像を左右中央に配置させたい。

質問

CSSで画像を左右中央に配置させたい。
CSSとXHTMLでWebページをつくっていますが、左右550pxくらいの説明画像をつくりました。
コンテンツ左右は600pxくらいでして、この600pxのDIVボックスモデルの中に左右中央に配置させたいのですが、検索しても遠回りな方法ばかりしか見つからず困っております。
たった画像を中央に配置させるだけのことがそんなに難しいんでしょうか？
検索してますと色々と複合技で達成するとか、モダンブラウザはこれを記述し、IE6にはこれを記述するとか、複雑なことしか見当たりません。

<div class="boxmodel600">
<p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。
</p>
<img class="img-btmctr" src="../img/img01.gif" alt="" width="550" height="400" />
</div>

CSSのほうは、以下です。ダメだったんでimg-btmctrのほうに「width: 600ppx;」と入れたんですがそれでもダメでした。

img.img-btmctr {
vertical-align: bottom;
padding: 10px 0 0 10px;
margin-left: auto;
margin-right: auto;
width: 600ppx;
}

.boxmodel {
display: block;
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 30px;
text-align: left;
}

回答No.2

ORUKA1951 · ベストアンサー

img要素は行内要素です。
<!ELEMENT IMG - O EMPTY -- Embedded image -->
13.2 画像の包含: IMG要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-IMG )より

　よって厳密にHTMLを書くなら
<div class="boxmodel600">
<p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。
</p>
<p class="Main Fig">
　<img class="img-btmctr" src="../img/img01.gif" alt="" width="550" height="400" />
</p>
</div>
でしょうね。(divは汎用要素で、内部にブロック要素も行内要素も含むことができますから、文法的には誤りではありませんが、HTMLの考え方からするとimgはブロック要素内に書くべき。
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV )より

　HTMLが以上の様なら
div p.Main{ text-align:center;text-indent:0em;}ですみます。
　(text-indent:0em;はpにtext-indent:1emを指定しているとき）

　(行内要素をブロック要素に変換したりするよりは）HTML的にはこの方法がベストでしょう。classｔがMainとFigに分けてあるのは、他のスタイルシート(代替スタイルシートや印刷用スタイルシート)を記述するときに楽だからです。

お礼

ありがとうございます、しっかりとできました！
しかも、ただできただけでなく、情報正しく、かつ極めて論理的で文句のつけようがないです。
classを二つあえて作るあたりも思慮が深いです。
大変感謝いたします。

回答No.3

noname#119957

何がダメなのかわかりませんが。。
単に・・回り込み禁止できないで困っているのでしょうか？

img.img-btmctr {
margin-left:25px;
margin-right:25px;
width: 550px;
clear-both;
}

.boxmodel {
display: block;
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 30px;
text-align: left;

clear-both；
}

補足

皆さん意味がわかっておられるのに、おわかりになられないようでしたら投稿不要です。
これだけわかるように書いているというのに、それでもわからないようでしたら申し訳ありませんが最低限の読解力をつけてから回答にご参加されたほうが良いと思います

回答No.1

grumpy_the_dwarf

img要素は置換インライン要素なので、text-align:centerな段落の
中に入れればいいんです。ブロック要素と勘違いすると嵌ります。

でなけりゃ、当該img要素をブロック要素に指定してから幅やマージ
ンを指定します。

.boxmodel {
width: 600px;margin:0 auto;padding: 10px;text-align: left;
background-color: pink;
}

.ctr {
text-align:center;
}

.boxmodel img {
display:block;width:500px;margin-left:auto;margin-right:auto;
}

<div class="boxmodel">
<p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリ
ア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリ
ア。文章エリア。文章エリア。文章エリア。文章エリア。</p>
<p class="ctr"><img src="images/green_mail_icon.gif"
alt="image" width="500px" /></p>
</div>

<div class="boxmodel">
<p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリ
ア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリ
ア。文章エリア。文章エリア。文章エリア。文章エリア。
</p>
<img style="" src="images/green_mail_icon.gif" alt="image" />
</div>

お礼

なるようですね。画像まで添付いただいてわかりやすいです。
大変ありがとうございました！