ベストアンサー

absoluteで配置している何枚もの画像を全体的に中央揃えにする方法

2010/11/07 18:30

absoluteで配置している何枚もの画像を全体的に中央揃えにする方法はありますか？マージンを設定しても一番上の画像(恐らくparent要素？)だけにしかマージンが適用されません。全ての画像を中央にするためには画像一つ一つを動かすしかないのでしょうか？因みに当方dreamweaverを使用しています。

elle0222
お礼率40% (2/5)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

metametamu
ベストアンサー率51% (153/295)

2010/11/09 05:06 回答No.4

またまたミスで申し訳ないです。ソースちゃんと見ていませんでした。まず、こんな感じにbody内を全部divで囲ってidをつけてください。 <body> bodyの内容 </body> ↓ <body> <div id="Wrapper"> bodyの内容 </div> </body> cssも少し変わっています。 ■１こ目 body { background-color: #336699; margin:0px; padding:0px; display: block; text-align:center; } #Wrapper { width:800px; margin:auto; position: relative; text-align:left; } ■２こ目 #Wrapper { width:800px; text-align:left; margin-left:-400px; position: absolute; left:50%; }

質問者

お礼 2010/11/10 20:44

1個目のやつで中央揃えできました！ありがとうございます！掲載しているのは練習用に作ったサイトなので消えてもまぁ…という感じです。実際のサイトには広告が掲載されないらしいので大丈夫なはずです。心配していただいてありがとうございます。本当にどうもありがとうございました！お世話になりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

metametamu
ベストアンサー率51% (153/295)

2010/11/09 04:53 回答No.3

このの部分だけ書き換えてみてください。多分できると思います。 body { background-color: #336699; margin:0px; padding:0px; display: block; text-align:center; } #Div { background-color: #000000; width:570px; margin:333px auto 0; padding-top:0px; position: relative; height:551px; color: #FFF; text-align:left; } ちなみにこっちは広告が被るバージョンです。古いIEで見たときの表示はこっちの方が気持ち若干重いはずです。勘違いだったらすみませんが、広告消しはサイト消えるかもしれないのでオススメはしませんよ。 #Div { background-color: #000000; width:570px; margin-left:-285px; padding-top:0px; position: absolute; top:333px; left:50%; height:551px; color: #FFF; }

ログインすると、全ての回答が全文表示されます。

metametamu
ベストアンサー率51% (153/295)

2010/11/08 00:53 回答No.2

すいません、margin忘れてました。 div img{ margin:auto; display:block; }

質問者

補足 2010/11/08 21:49

回答どうもありがとうございます。 divをいじってもあまり解決しなかったので、練習用ページに今の状態を載せてみました。今は画像全部が左に寄っていると思うのですが、これをブラウザで見たときに中央に表示する場合はcssに何を記載したら良いのか教えていただけますか？ http://apanyan.client.jp/top.htm よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

metametamu
ベストアンサー率51% (153/295)

2010/11/07 21:00 回答No.1

中央に寄せたい要素を全部括ればその親要素だけをabsoluteで配置して、内部はtext-align:center;で中央寄せできますよ。 <div><img src="A.jpg" alt="" /><img src="A.jpg" alt="" /></div> div{ position:absolute; right:0; left:0; text-align:center; } div img{ display:block; }

ログインすると、全ての回答が全文表示されます。