レイアウト

質問

スタイルシートで
BODY { text-align:center; }
を入れ、本文のところで

<div style="border:1px solid #8B4513;width:650;padding:5px;">

内容

</div>

としていますが、センタリングされないで表示されてしまいます。
また内容部分に

<span style="border:1px solid #000000;width:300;height:75;text-align:left;">
～～～
</span>

と言った感じのものを入れており、
横においた画像でalign="left"を指定しているにもかかわらず、画像の横に表示されず、ぐちゃぐちゃになってしまいこれもうまく表示されていません。
IE5.5や6ではきちんと表示されるおり、このまま行こうと思っていたにもかかわらずNetscape7ではかなり崩れてしまい、びっくりしています。
テーブルで同じようにすることも出来ると思いますが、テーブルレイアウトはあまり好ましくないと聞きます。
そもそも上の方法が間違っていますか？
上のように枠線の中にコンテンツを入れる、という形はどうしても使いたいのですが…。

文中、分かりにくいところが多くて申し訳ありません。
アドバイスよろしくお願いします。

回答No.2

selene_pl

＃１の方も仰っているとおり、text-align:center;はあくまで、「テキストのみ中央寄せ」です。
widthを指定して「margin:auto;」とするか、（それだとIE5で対応していないので）
widthを指定せずに、「margin-left:15%;margin-right:15%;」と指定して、両サイドのマージンをとる方法で対応してください。

また、text-alignは、ブロック要素に対して適用するので、spanに使うのは間違っています。
スタイルシートを使って、画像を左におきたいなら、

<p style="float:left;"><img src="image.jpg"></p>
<p>
画像右テキスト
</p>
<p style="clear:both;">
回り込み解除したテキスト
</p>
でいいはずです。（NN7.0確認）
画像を右なら、float:left;をfloat:right;にするだけですね。

お礼

回答ありがとうございます。
画像のfloat:left;などは知らなかったのですが、うまくいきました。
またブロック要素やインライン要素なども混同していました。
回答をヒントにうまく表示させることができました。

回答No.1

noname#199778

まず、div要素のセンタリングですが、ブロックレベル要素のセンタリングについては、Netscapeでは左右のmarginをautoに指定することで行います。 Netscapeでは、text-alignのプロパティは、インライン要素の位置指定にのみ使用されるようです。
body要素ではなく、div要素のスタイルシートの方に、「margin-left: auto; margin-right: auto;」を付け加えてみてください。 それで実質的にセンタリングができると思います(margin: auto;でも良いかも知れません)。
蛇足ですが、IEはこの「margin: auto;」に対応していないようですね。

その次のspan要素についてですが、少々状況が飲み込めないので、なんとも回答できません。 その部分のソースを差し支えない範囲で開示していただいて、それを表示させた時のどういう点がお気に召さないのかを補足していただければ、解決できるかも知れません。

ついでですが、スタイルシート内で幅などを指定する場合は、単位をつけることをお勧めします。 HTMLと違って、スタイルシートでは数値が必ずしもピクセル単位というわけではないので、単位もつけておく方が良いでしょう。

お礼

回答ありがとうございました。
div要素やspan要素をうまく理解していなくてぐちゃぐちゃになっていたようです。
回答をヒントにmargin:auto;もN7ではうまく動いてくれ、見事IEと同じようにすることができました。