- ベストアンサー
absoluteで配置している何枚もの画像を全体的に中央揃えにする方法
absoluteで配置している何枚もの画像を全体的に中央揃えにする方法はありますか？ マージンを設定しても一番上の画像(恐らくparent要素？)だけにしかマージンが適用されません。 全ての画像を中央にするためには画像一つ一つを動かすしかないのでしょうか？ 因みに当方dreamweaverを使用しています。
- みんなの回答 （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%; }
その他の回答 (3)
- metametamu
- ベストアンサー率51% (153/295)
このの部分だけ書き換えてみてください。多分できると思います。 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)
すいません、margin忘れてました。 div img{ margin:auto; display:block; }
補足
回答どうもありがとうございます。 divをいじってもあまり解決しなかったので、練習用ページに今の状態を載せてみました。 今は画像全部が左に寄っていると思うのですが、これをブラウザで見たときに中央に表示する場合はcssに何を記載したら良いのか教えていただけますか？ http://apanyan.client.jp/top.htm よろしくお願いします。
- metametamu
- ベストアンサー率51% (153/295)
中央に寄せたい要素を全部括ればその親要素だけを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; }
お礼
1個目のやつで中央揃えできました！ありがとうございます！ 掲載しているのは練習用に作ったサイトなので消えてもまぁ…という感じです。 実際のサイトには広告が掲載されないらしいので大丈夫なはずです。 心配していただいてありがとうございます。 本当にどうもありがとうございました！お世話になりました。