cssで投稿した画像を中央に表示たい！！！！！

質問

blogで投稿した画像を中央に表示したい！！！！！
css詳しい人、教えてください！！！！！
今、エキサイトブログの設定を行っているんですが、cssなど全くの初心者なので、右も左もわかりません。
そこで、現在、http://tenjikunik.exblog.jp/　のようになっています。

太陽の投稿画像をブラウザの中央付近に表示したいのですが、次のhtmlまたはcssをどう変更すべきでしょうか？助けてください。

css

/* excite blog skin css */

body { margin : 0; padding: 0; background: #151414; color : #e7e7e7;}

body,td,div,li{ font-size : 13px; font-family : verdana,arial,sans-serif; line-height : 150%;

letter-spacing:1px; word-wrap: break-word;}

a:link{ color: #cfcbc4; text-decoration: underline; }
a:visited{ color: #cfcbc4; text-decoration: underline; }
a:active{ color: #cfcbc4; text-decoration: underline; }
a:hover{ color: #cf9712; text-decoration: none;}

#im{ width:100%; clear: none;}

td.im_hit{
background: url(http://image.excite.co.jp/jp/portal/im/imach_icon_orange.gif) no-repeat 0.5em 0.5em;
padding: 0.5em 0.5em 0.5em 25px; cursor:pointer;cursor:hand;
line-height: 100%; width: 550px;text-align:left;color:#cfcbc4;}

div.im_title{font-size:x-small;color:#666;text-align:right;margin-bottom:10px;}
div.im_title a{color:#666;}
td.im_hit:hover{background-color:#fffee1; color:#333333;}

table.im_summary{margin-top:3px;}
td.im_summary {font-size:small;font-family:"Arial";line-height:160%;}
span.im_url{font-size:small;font-family:"Arial"; text-decoration: underline;}
span.im_titletext{text-decoration: underline;}

#cmtviewfrm{ display:none !important;}

#main { width:1899px; margin:0 auto; text-align:left; padding-bottom: 20px;overflow: hidden;}

#Headarea{ height: 401px; width:1899px; margin: 0 auto; position: relative; }

#titlearea{ width: 8020px; position: absolute; bottom: 0; left: 0; background: #a0a0a0;filter: alpha

(opacity=80); -moz-opacity:0.8; opacity:0.8; padding: 10px;}
div.HEADER{ font-size: 16px; font-weight: bold; line-height : 100%;}

#titlearea a{ color: #fff; text-decoration:none; }
#postArea{ margin-top:20px; width: 565px; float: left;}

字数が足りません。いって頂いたら開示いたします。

回答No.1

noris02 · ベストアンサー

最初に。
ブラウザで ソースを見てみると
<img class="IMAGE_RIGHT" src="略" border="0" width="480" height="320" align="right" OnClick="imgview('略',2496,1664,'1');" OnMouseOver="this.style.cursor='hand'"/>
となってますが align="right" がしっかり　記述されてますね・・。　右よせになってます

cssで　画像だけ　いじるとしたら class="IMAGE_RIGHT" なので
.IMAGE_RIGHT{～} です。

が、しかしその　外枠である div class=postArea あたりで　
float:left? で 565?px の width が指定してあるので ブラウザの真ん中には行かないです。

#Headarea img{width:900px;}
#postArea{ margin-top:20px;margin-left:auto;margin-right:auto; width: 565px;}
にしたら どうなります？

お礼

ありがとうございました。
一応成功です。

私が無知なために、ご回答の意味をすべてくみ取ることは今はできませんが、理解できるようになります。

再度、ありがとうございました。

補足

回答ありがとうございます。

#Headarea img{width:900px;}
に書き換えると、

http://tenjikunik.exblog.jp/
の上の雲の画像の左上１/４だけ表示されました。

そして、『天竺日記』と書いてあるタイトル欄がブラウザの最下に表示されるようになりました。

#postArea{ margin-top:20px;margin-left:auto;margin-right:auto; width: 565px;}
に書き換えると、

太陽の画像が希望通り中央に表示されるようになりました。
しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。

プロフィールの位置は変えたくないのですが、なにかアドバイス頂ければうれしいです。

もし、投稿した画像（例えば太陽の画像）の表示される大きさを大きくするには、どの値を変更すべきでしょうか？

そして、noris02さんはどうやってcssを学んだのですか？私も詳しくなりたいのですが。。。

回答No.2

naokita

記事枠のセンターではなく、ブラウザのセンターですね・・・
検証はしていませんが、
#postArea
.POST
.POST_HEAD
.POST_BODY
これらの幅が、widthで565px,580px程度しかないですね・・・
そもそも右サイドにでもサイドバーを置くつもりじゃないのかな？
それだと余計センター配置には出来ない・・・
上記の565px,580pxの枠の中に
width="480"の画像だけをセンンターにしても意味が無く、
ブラウザでのセンター配置にするには、
サイドバーを置かない配置にして、
580pxの枠群を大きくして、画像もセンターにする。

もしくは、
#postArea{ margin-top:20px; width: 565px; float: left;}の
を
#postArea{ width: 565px; margin: 20px auto 0;}に。

-------------
そもそも、
おそらく、２カラムだからHTMLが編集できるのなら、
構成を編集し直さないとダメです。
また、画像は、原画サイズをHTMLの表示設定で小さくせずに、縮小加工した方が良いです。

お礼

回答ありがとうございます。

とりあえず、希望通り、真ん中に配置できました。

ありがとうございます。

補足

ご回答ありがとうございます。

#postArea{ width: 565px; margin: 20px auto 0;}

に書き換えると、
太陽の画像が希望通り中央に表示されるようになりました。

しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。

プロフィールの位置は変更したくないのですが、何かアドバイス頂ければ幸いです。

もし、投稿した画像（例えば太陽の画像）の表示される大きさを大きくするには、どの値を変更すべきでしょうか？