要素の配置

質問

outlineをセンター配置に、
outlineの中の画像とh1要素をセンターに、最新の更新を右寄せに配置したいのですが、うまくできません。
どのようにしたらよいか教えてください。
http://www.asahi-net.or.jp/~gc4t-iwt/test/

cssソース
body {
margin-left: auto; margin-right: auto;
color: black;
}
#outline {
width: 750px;
border: 2px solid silver;
}
h1 {
color: blue;
margin-left: auto;
margin-right: auto;
}
div.center {
padding-left; auto;
padding-right: auto;
}
div.right {
position: relative;
right: 10px
}

回答No.3

abril · ベストアンサー

HTMLのマークアップに文法ミスがあるのと、CSSのプロパティの扱いにちょっとした勘違いがある様です。

【HTML】
<div class="center"><img src="logo2.gif" width="325" height="82" border="0" alt="gankoの部屋"</div>
↑imgタグの最後の>が抜けています。

【CSS】
BODY {
text-align: center;←追加。IE6バグ対策、詳細は後述。
margin-left: auto; margin-right: auto;←削除。
color: black;
}

#outline {
width: 750px;
text-align: left;←追加。bodyのtext-align: center;の継承を上書きする為。
margin: 0 auto;←追加。marginの左右のauto値はここで指定する。
border: 2px solid silver;
}
h1 {
color: blue;
margin-left: auto;←削除してよい
margin-right: auto;←同上
text-align: center;←追加
}
div.center{
padding-left; auto;←paddingの値にautoはありません。削除を。
padding-right: auto;←同上
text-align: center;←追加
}
div.right{
position: relative;←削除。（現状のソースだけなら）特にrelativeを使う必要はありません。
right: 10px←positionプロパティの削除と合わせて削除。
text-align: right;←追加
}

marginの左右のautoの値は、当該要素h1やdiv.centerのレンダリングの幅が親要素#outlineの幅よりも明示的に狭くするのでなければ、この場合は必要ありません。本件では、単にそれぞれの内包要素（画像なりテキストなり）がセンタリングもしくは右揃えにするという意図の様ですので、text-alignを指定すれば済みます。
また、IE6ではバグによりこのmarginのauto値は無視されます。その為、bodyの指定からmarginの左右のautoを外し、かわりにtext-align: center;を指定しするとIE6ではバグによりブロック全体を親要素に対してセンタリングで配置します。これで#outline全体がウィンドウに対してセンタリングされる様になります。

お礼

意図どおりになりました。
ありがとうございます。

回答No.2

Tanigucchi

スタイルシートにこだわらないのであれば、

＜div id="outline" align="center"＞
　　＜div align="center"＞＜IMG ～ ＞＜/div＞
　　＜div align="right"＞最新の更新 ～ ＜/div＞
　　＜H1＞AAAAAAAAAAAAAAAAAAAA＜/H1＞
＜/div＞

でいかがでしょうか？(＜＞は半角に置換してお使いください。)

回答No.1

hobbit-m

http://jigsaw.w3.org/css-validator/

でチェックしたら、文法エラーがあるようです。

参考URL：

http://jigsaw.w3.org/css-validator/