- ベストアンサー
CSSで背景画像をウインドウの中心（横方向）に配置する方法？
過去質問したのですが、解決していないのでまた質問させて頂きます。CSSでウインドウの大きさを変えても指定した背景やコンテンツがずっと中心にいさせる方法はありますか？Yahooのような縦長のページにしたいと思っています。いまの段階は760pxの幅でずっと左側にいるようになっています。中心に移動させたいです。以下に参考のためにソースをのせておきます。 --- css --- h1{ margin-top: 0px; margin-bottom: 10px; text-align:center; } p{ text-align:center; margin-top: 0px; margin-bottom: 10px; } body{ margin-top: 0px; } #maincontents{ width:70%; background-image:url(../img/sakanay.jpg); background-position: center; margin-right: auto; margin-left: auto; } --- html --- <body> <div id="maincontents"> <p align="left"><font size="-3">Team X</font></p><br> <h1><img src="img/ten02.jpg"></h1> <p><img src="img/2005g.jpg"></p> <hr> <a>Copyright(c)2006 TX All rights reserved.</a> <p> </p> <br> </div> </body>
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
わたしがよく使う方法は、 body { text-align: center; } #maincontents { width: 760px; margin: 0px auto; text-align: left; } とするやり方です。 この方法だと、確実に横幅760pxを確保できるので、ウィンドウ幅を変更されたときにレイアウトが崩れるのを防ぐことができるし、ウィンドウ幅が760px以上の時はコンテンツが真ん中に表示されるようになります。 一応、ＮＮとＩＥの両方で確認しています。
その他の回答 (6)
- suzuko
- ベストアンサー率38% (1112/2922)
＃２です。 >何に対してのパーセンテージか分かりますか？ ブラウザ画面の横幅に対してなのでしょうか。 あ、そうですね。#leftと#contentsはブラウザ画面の横幅に対しの％ですが、#rightと#maincontentsは#contentsに対しての％でしたね。数字、間違えていました。ごめんなさい。 #maincontents{ width:70%; ： ： } ではなくて #maincontents{ width:82.35%; ： ： } だったら、ほぼプラウザ画面の70%幅になります。 ただ、前にも書いたようにflaot要素はIEのバージョンによっては表示がおかしくなります。＃４＃６の方が勧める方法が一般的ですよね。^^;
お礼
再度質問に答えていただき、有難うございます。 ブラウザ画面の横幅に対しの％だったのですね。
- partita
- ベストアンサー率29% (125/427)
しょうがないから昔ながらのテーブルレイアウト。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <title>タイトル</title> <style> body {width:100%;height:100%;vertical-align:middle;margin:0;padding:0;} table {width:100%;height:100%;vertical-align:middle;margin:0;padding:0;} div {width:300px; background-color:#00FF33;margin:auto;} </style> </head> <body> <table> <tr> <td><div><img src="_img/index/i_center_photo04.gif">いろいろ</div></td> </tr> </table> </body> </html>
補足
ご回答ありがとうございます。 しかし、HTML4.01ではレイアウトにTableタグを使わないように推奨されていると聞いたことがあるのですが、その点はいかがでしょうか？
画像やテキストなどを個別にセンタリングしたい場合は text-align:center; で OK です。 …が、ボックスなどをセンタリングしたい場合はちょっとした工夫が必要です。 http://www.mozilla.gr.jp/standards/webtips0004.html ぶっちゃけ IE に対応させれば大抵の人間が見られるって言うのは事実だと思いますが、 それだと当然非 IE だとか Macintosh だとかのユーザーがいた場合に苦情が来るんですよね。 最悪の場合黙ってそのサイトを去っていくこともあるし…。 やっぱりブラウザ間での互換性には十分配慮しなければいけません。
お礼
この点考慮していかないとますですよね。 ご指摘有難うございました。
- crepon133
- ベストアンサー率51% (399/776)
#maincontentsをセンターに配置する #page { text-align:center; margin: 0px; padding: 0px; } <div id="page"> <div id="maincontents"> ・ ・ </div> </div> <p align="left">これはクラス指定にした方が・・・
お礼
非常に簡単にできました。ありがとうございます。とってもシンプルにかけていて満足です。
- suzuko
- ベストアンサー率38% (1112/2922)
絶対配置の場合、対応プラウザによる違いが出ます。 比較的マシなのは、３段組にして左右に空のスペースを置くことでしょうか。 ただ下のfloatの配置方法だと、IEで適用されないらしいのですが・・未検証です。^^; ********CSS**************** #left{ width:15%; float:left; } #contents{ width:85%; float:right; } #right{ width:15%; float:right; } #maincontents{ width:70%; float:left; background-image:url(../img/sakanay.jpg); } #foot{ clear:both; } *********html********* <body> <div id="left"></div> <div id="contents"> <div id="maincontents"> </div> <div id="right"></div> </div> <div id="foot"></div> </body> 配置の方法はこれ以外にも色々ありますよ～
補足
ご回答ありがとうございます。 width:15% width:85% などの”％”ですが、 何に対してのパーセンテージか分かりますか？ ブラウザ画面の横幅に対してなのでしょうか。
- Bit0029
- ベストアンサー率0% (0/2)
また回答練習（？）しますね。 背景画像を中心に配置したいのですよね。 上記ソース同じく作成しました。 background-position: center;で背景画像を中央に配置できますね。 また垂直もなら、background-position: center center; firefoxやＩＥ6.0じゃなくて古いブラウザ対応の事でしょうか？ #maincontents{ width:70%; background-image:url(image/php.jpg); background-position: center; margin-right: auto; margin-left: auto; background-repeat: no-repeat; } あんり役に立たない回答だったかな・・・(￣_￣；)
お礼
アドバイスありがとうございました。このソースで試してみましたがだめでした。
お礼
これまたシンプルプログラムですね。 同じことをするにも色々な方法ができるのですね。 とても参考になりました。 ありがとうございます。