• ベストアンサー

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

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

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

  • ベストアンサー
回答No.4

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

elle0222
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答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; }

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

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

elle0222
質問者

補足

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

全文を見る
すると、全ての回答が全文表示されます。
回答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; }

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 中央寄せに対するabsolute配置

    中央寄せされたページの右上あたりに画像を配置したいのですが、 重要でないものなのでHTMLの下のほうに書いています。 普通に position:absolute; で持ち上げると、画面左上が基準であるためモニターサイズによって中央寄せ部分との位置関係が狂ってしまいますよね? かといってmarginにマイナスを指定したくありません。 そこで、画像の入った要素を最上部(top:0px)の中央(left:50%)に絶対配置し、そこからimgを絶対配置でleft:100pxのように右に動かしてみました。 IEやFirefox、Opera、Chromeなど、思いつくブラウザで見たところ問題ないのですが、Dreamweaver CS4のライブビューで見るとずれています。 たしかWebkitがエンジンだったと思うのですが、もっと賢いやり方はありませんか?

    • ベストアンサー
    • HTML
  • 中央揃えのJavascript!

    Dreamweaver8を使っていたためposition:absoluteでサイトを作ってしまいました。ページを中央揃えで表示したいのですがどうにもうまくいきません。positionを変更して位置を指定し直すのは大変なので… ウィンドウサイズを取得してページを中央揃えにするjavascriptをご存知の方はいらっしゃいませんか? もしくは何か解決策をいただけると助かります。 よろしくお願い致します。<(_ _)>

  • wordで一行ごとに文字の配置を換えたいのです。例えば一行目は中央揃え

    wordで一行ごとに文字の配置を換えたいのです。例えば一行目は中央揃え、二行目は右揃えという風にです。一行目の左端にカーソルを持っていって中央揃えのボタンを押すと全体が中央揃えになってしまい、二行目を右揃えにすると全体が右揃えになってしまいます。範囲指定をしても同じ結果です。どうぞよろしくお願いいたします。ちなみにwordは2003です。

  • 中央に配置して上にテキストを置きたい

    dreamweaver8 を使ってホームページを作っています。 画像(中央に配置)の上にテキストを置きたいのですが、どのような方法がベストなのでしょうか? 試してみたのは… 1.背景として配置して上にテキストを置く。 でもこれだと、背景の画像が中央にいきません。 2.画像をイメージとして配置 これだと、テキストが上に置けません。 画像を中央に配置して、かつ上にテキストを置けるようにするにはどうしたらいいのでしょうか?? よろしくお願いします。

    • 締切済み
    • CSS
  • goliveのレイヤー 中央揃え

    golive9をつかっています。 初心者です。 教えてください。 レイヤーを使って、アニメーションをしようと思っています。 まず、サイトがウィンドウの中央に表れるようにしたいので、グリッドを中央揃えで配置しました。 そこへレイヤーを配置して、画像を取り込み中央揃えにしたのですが、ブラウザで確認すると、ウィンドウの大きさによって、レイヤーの配置がずれてしまいます。  レイヤーをグリッドと同じように配置させる(?)為にはどうしたらよいでしょうか?

  • 可変幅でabsolute指定で中央配置できません

    可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか?困っています、どなたかお助けください。 例えば画像が固定のサイズであれば  width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500pxとはなりません。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • ワードでのセル中央揃えの方法について

    ワードの2000を使っています。 表の高さが40mm、文字は10.5で、1段落です。 文字の位置を上下左右とも、中央揃えにしようと思い、 右クリック後、「セルの配置」で「中央揃え」を選んだのですが、どうしても『上の中央揃え』の位置にきてしまいます。 どうしたらど真ん中に文字をこさせることができるでしょうか? 教えてください。

  • HPビルダー・中央揃えについて

    先日ホームページビルダー9を購入し,ホームページを作成しています。 どこでも配置モードで,文字ボックスをページ全体の「中央揃え」にしたいのですが,ヘルプを見てもできませんでした。 標準モードでしたら簡単に中央揃えできたのでが,どこでも配置モードでも簡単にできるはずだと思うのですが。方法を教えて下さい。

  • 全てのセルの文字を中央揃えにしたい。(2010)

    Excel 2010 を使っております。 全てのセルに書き込む文字を中央揃えにしたいのですが、やり方を教えてください。 個々のセルに関しては[配置]→[中央揃え]で中央配置にできるのですが、 セルを移動するとまたデフォルトの配置に戻ってしまいます。 よろしくお願い致します。

  • ワードの表で中央揃えが出来ない

    セル内の文字を垂直方向の中央揃えにしたいのですが、中央揃えになりません。 画面上でもプリントアウトしても中央揃えではなく下揃えになります。 設定は、9ポイントの文字、行を5mmの固定値、セルの配置を中央揃えにしています。また、表のプロパティからもセル、垂直方向の位置を中央揃えにしています。 なぜ、中央揃えにならないのでしょうか。何方か教えて下さい。