- ベストアンサー
CSSで中央に表示する方法とページ下部に要素を配置する方法
- CSSを使って要素を上下中央に表示させる方法と、ページ下部に要素を配置する方法について教えてください。
- 以下のHTMLでは、flashというIDを持つ要素を上下中央に表示させたいと思っています。また、footerというIDを持つ要素を常にページの下部に表示させたいです。どのようにCSSを書けば良いでしょうか？
- ページ上にコンテンツが少ないためスクロールが必要なく、flash要素をウィンドウの上下中央に、footer要素をページの下部に配置したいです。どのようにCSSを書けば良いでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTML ---- <body> <div id="wrap"> <div id="flash"><img src="images/logo.jpg" width="960" height="501" /></div> </div> <div id="footer">©</div> </body> CSS ---- * { margin: 0; padding: 0;} html, body { height: 100%; } #wrap { min-height: 100%; } #flash { position: absolute; top: 50%; left: 50%; margin: -250px 0px 0px -480px; width: 960px; height: 500px; } #footer { line-height: 30px; border-top: 1px solid #ccc; height: 30px; position: relative; margin: -31px 0 0; /* negative value of footer height */ width: 100%;} /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; } CSSについてはCSS Sticky Footer様（参照URL先）のソースを参考にしています。 フッターに罫線を入れているのは、見た目の分かりやすさだけです。
その他の回答 (2)
- rurino
- ベストアンサー率55% (38/68)
追記： #2です。 自分でテストしてみたフラッシュの代わりのソースを入れてしまったので^^;; logo.jpgがFlashのファイルの部分となります。
- 森野 クマ（@Wingard）
- ベストアンサー率18% (19/102)
#contents { width: 960px; } #flash { margin: 0 auto; height: 450px; } #footer { margin: 0 auto; height: 150px; } としたうえで、 <div id="contents"> <div id="flash"></div> <div id="footer"></div> </div> とすれば上下に並びませんか。
