- ベストアンサー
文章を左揃えのままCSSで全体を中央揃えにしたい
個人でイラスト系サイトを運営しております。 今まではサイトのレイアウトはテーブルで設定していました。 しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、CSSに変更することに。 その方が表示が速くなるという話を聞きまして、意気揚々に始めたまでは良かったのですが…。 この質問に該当するスレを拝見しましたが、なかなか思い通りにいかずに困っています。 ブラウザはIE7。 CSS、HTMLはこのように表記しております。 ●??02.css ------------------------------------------------- #outline{ width:700px; margin-right:auto; margin-left:auto; } #main{ float:left; width:300px; } #menu{ float:right; width:400px; } #footer{ clear:both; } ------------------------------------------------- ●HTML ------------------------------------------------- <html> <head> <link rel="stylesheet" href="??01.css" type="text/css"> <link rel="stylesheet" href="??02.css" type="text/css"> <title>サイト名</title> </head> <body> <div id="outline"> <div class="menu"> /画像/ </div> <div class="main"> /コンテンツ/ </div> <div id="footer"> </div> </body> </html> ------------------------------------------------- これを見て何かお気づきの所がありましたら、どなたかご教授願えると助かります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
●idは「#」ですがclassは「.」で指定しますので、 .main{} .menu{} とします。 ●IEで見る場合、margin-autoではセンタリングされないので、親要素にtext-alignを入れてやります。子要素はtext-align:leftを使って左揃えに戻します。 （他のCSSファイルで指定されているかも知れませんが念のため；） ●<div id="outline">の閉じタグを挿入します。 こんなところでどうでしょう… ---------------------------------------- body{text-align:center;} /*IE用*/ #outline{ width:700px; margin-right:auto; margin-left:auto; text-align:left; /*文字左揃え*/ } .main{ float:left; width:300px; } .menu{ float:right; width:400px; } #footer{ clear:both; } --------------------------- <html> <head> <link rel="stylesheet" href="??01.css" type="text/css"> <link rel="stylesheet" href="??02.css" type="text/css"> <title>サイト名</title> </head> <body> <div id="outline"> <div class="menu"> /画像/ </div> <div class="main"> /コンテンツ/ </div> <div id="footer"> </div> </div><!--outline--> </body> </html>
その他の回答 (1)
- 1632bia
- ベストアンサー率39% (15/38)
単に左マージンを設定するだけではダメですか？ 質問の意図を間違っていたらすみません。 ============================================= <html> <head> <style type="text/css"> <!-- body { margin-left:250px; } --> </style> </head> <body> 文章は左そろえのまま<br> 全体を中央そろえにしたい。<br> <img src="image_sample.jpg"> </body> </html>
補足
回答ありがとうございます。 早速試してみました。 ですが、少々説明不足な質問をしてしまったようで申し訳ありませんでした。 言葉って難しいですね。 ウィンドウの大きさによって中央にくるよう変化するといえばよろしいでしょうか。 ブラウザ拡大サイズの時の中央ではないので、この回答は少し違うように思います。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
返答ありがとうございます。 早速やってみたところ、何とか中央に揃えることが出来ました。 ブラウザによってタグが適応されない時もあるとは…！ 自分で確認していたつもりでも、「outline」を閉じるのを忘れていたのには気付きませんでした。 一人でやるのと誰かから見てもらうとでは大分違いますね。 では、これにて回答を締め切りさせてもらいます。 答えて下さった方々、どうもありがとうございました。