文章を左揃えのままCSSで全体を中央揃えにしたい

解決済

質問者：totoneka
質問日時：2007/10/31 00:25
回答数：2件

個人でイラスト系サイトを運営しております。
今まではサイトのレイアウトはテーブルで設定していました。

しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、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件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： apotplant
回答日時：2007/10/31 08:55

●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>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

返答ありがとうございます。
早速やってみたところ、何とか中央に揃えることが出来ました。

ブラウザによってタグが適応されない時もあるとは…！
自分で確認していたつもりでも、「outline」を閉じるのを忘れていたのには気付きませんでした。
一人でやるのと誰かから見てもらうとでは大分違いますね。

では、これにて回答を締め切りさせてもらいます。
答えて下さった方々、どうもありがとうございました。

通報する

お礼日時：2007/10/31 22:23

No.1

回答者： 1632bia
回答日時：2007/10/31 00:47

単に左マージンを設定するだけではダメですか？

質問の意図を間違っていたらすみません。
=============================================
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
文章は左そろえのまま<br>
全体を中央そろえにしたい。<br>
<img src="image_sample.jpg">
</body>
</html>

この回答への補足

回答ありがとうございます。
早速試してみました。

ですが、少々説明不足な質問をしてしまったようで申し訳ありませんでした。
言葉って難しいですね。

ウィンドウの大きさによって中央にくるよう変化するといえばよろしいでしょうか。
ブラウザ拡大サイズの時の中央ではないので、この回答は少し違うように思います。

補足日時：2007/10/31 07:54

通報する