- ベストアンサー
ボックスをテーブルを使わず中央に表示する方法
こんにちは。 さっそく質問ですが、ボックスをテーブルを使わずスタイルシートで中央に表示する方法はないでしょうか？ marginの指定では左右しか中央揃えされず、悩んでおります。 同じような質問がいくつもありましたが、テーブルを使っての方法でした。 テーブルを使わずどうしてもボックスを中央に表示したいのですが、やはり正確に中央に表示することは無理なのでしょうか？ 画面サイズを変えても中央に表示されるようにしたいのですが…。 何か方法があればよろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
前回似たような質問があったので参考までに。 http://okwave.jp/qa2838072.html widthは%で表記すれば全体に対する幅の割合で表示されるようになります。 下記の内容はHTML4.01のTransitionalを想定して記述していますが、XHTMLでも正しく表示されるはずです。ちなみに動作確認済みブラウザーはIE 7、FireFox 2、Netscape 7.1です。Operaやマックでの表示は確認していませんが、正しく表示されるはずです。多分。 CSSの記述（外部読み込み、直接書き込みは問わないが、XHTML化を考えているなら外部がいいかもしれません） .cent { text-align: center; } .cont { margin-left: auto; margin-right: auto; width: 835px; } width、つまり幅は設定しておいた方が無難です。835pxは、ただ僕がそうしているだけです。 本体 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> ＝＝省略＝＝ </head> <body> <div class="cent"> <div class="cont"> ＝＝内容＝＝ </div></div> </body> </html> 本来ならcontで設定している分だけで良いはずなのですが、未対応のブラウザーもあるためにcentを加えています。なお、<div class="cent ; cont">は意味が無いことを確認していますので、手間は掛かりますが上記のように記述してください。 ちなみに「centとcontの順番は問いません」と書いていましたが、上記の順番でなければならないことを確認しましたので訂正しておきます。 それでは。
その他の回答 (1)
- goldfox
- ベストアンサー率49% (123/249)
高さと幅が固定されていれば、以下のcssが有効のようです。 <style type="text/css"> <!-- #center{ height:200px; width:500px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-250px; border:solid 1px #666666; } --> </style> <div id="center"> texttext </div>
