掲示板/スタイルシート質問板/過去ログ/一覧/ ページ全体をブラウザの中央に表示させたい

0 名前：ＳＤ： 2006/12/16（土） 14:13 ID:bn6n70Fa: 現在は

<body>
<div align="center">
画像、table、テキスト
</div>
</body>

として、全体を中央に配置していますが、
これを外部スタイルシートで表記する方法を御教授ください。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/12/16（土） 14:13 ［URL］ ID:O5hEMlpW

要素内のテキストをセンタリングするには、text-align を center にします。
要素そのものをセンタリングするには、左右 margin を auto にします。

HTML:

<div id="main">
	<p>テスト</p>
</div>

CSS:

#main{
	width: 90%;
	background-color: #CCF;
	margin-left: auto;
	margin-right: auto;
}

2 名前： S´ｍｆ ： 2006/12/16（土） 14:13 ID:5ngCu.V6: 横からすいませんが
text-alignでIEでは要素そのものが中央表示されたのですがFirefoxでは中央表示になれませんでした
text-alignを消して
margin-left: auto;
margin-right: auto;
を書いたところIEでもFirefoxでも中央表示になりませんでした
CSSは次にように書いてます
.all{
margin-left: auto;
margin-right: auto;
border-collapse:collapse;
text-align:center;
}
HTMLは
<div class="all">
ページ内容
</div>
です
どうかご指摘頂ければうれしいです

3 名前： K+S ： 2006/12/16（土） 14:13 ID:nROqylMa: >>2
中央表示されてるでしょ。
幅が親要素の表示可能領域まであるけど。

4 名前： SD ： 2006/12/16（土） 14:13 ID:.u2aSHEu: カヅサツ ◆ThCi95HEzw　さん、早速のご指導ありがとうございます。

試してみましたが、S´ｍｆ　さんが指摘されたように
IEでは見事に中央に表示されたのですがFirefoxでは中央に表示されませんでした。
ブラウザに依存しないページを作りたいと思っています。
何かほかの手段は無いでしょうか。

S´ｍｆさん同じような悩みのようですね
K+Sさんの指摘を参考に、私も試してみます。

5 名前： NOBU ： 2006/12/16（土） 14:13 ［URL］ ID:xZmdex57: これで、中央表示されます。

こんな風に表示されます。
http://soujiya.com/

#content {
margin: 0px auto 0px auto;
width: 800px;
background: #333333;
border: solid 1px #aaaaa0;
}

私はメインにOperaを使っていますが、Operaで正常に表示されても、IEだと崩れる現象は良くあります。
デザインの確認はIEではなく、Operaなど他のブラウザでするといいでししょう。

追伸
OperaではBODYタグそのものにセンタリングさせることができますが、IEでは残念ですができません。
body {
margin: 0px auto 0px auto;
width: 800px;
background: #333333;
border: solid 1px #aaaaa0;
}

6 名前： Newのり太 ： 2006/12/16（土） 14:13 ID:yOLigvMX: 悩み無用。
http://www.mozilla.gr.jp/standards/webtips0004.html

7 名前： カヅサツ ： 2006/12/16（土） 14:13 ［URL］ ID:lY9L7AMa: http://kadu.vis.ne.jp/test/ に >>1 のサンプルを掲載しました。

Windows版 Internet Explorer 7.0, Opera 9.0, Firefox 2.0 ですべておなじように中央寄せになっていることは確認しています。

8 名前：サイ： 2006/12/16（土） 14:13 ID:aLH9p93j

横から失礼しますが。

>>2さんが言われているのは、>>3の方がおっしゃっているように、「幅（width）」が指定していないからでしょう。
div要素は指定が無ければ親要素の100%と同じ幅表示になります。

ちなみに、
margin-left: auto;
margin-right: auto;
は、要素自体をセンタリングしますので、もちろん中に含まれる文字は左寄せになります。
ですので、
>IEでもFirefoxでも中央表示になりませんでした
というのは、表示領域いっぱいの要素に内包されいる文字が左寄せだったので、中央表示に見えないと言うことでは無いでしょうか？

それで、思ったのですが。

<div align="center">
画像、table、テキスト
</div>

で表示される状態を再現するとなると、CSSは以下のようになるのでは？

HTML：

<div id="main">
	<p>テスト</p>
</div>

CSS:

#main{
	text-align: center;
}

つまり要素をセンタリングするのではなく、その要素内の文字をセンタリングしている状態です。
というか、そのやり方は>>1さんが1行目で言っておられますが。

9 名前： SD ： 2006/12/16（土） 14:13 ID:.u2aSHEu: NOBUさん、ご指導ありがとうございます。
ご指摘のソース

#content {
margin: 0px auto 0px auto;
width: 800px; }

で試してみました。

私はメインでFirefoxｗを使っています。
こちらではきれいに中央に表示されましたが、IEではまったく効果がありませんでした。
Operaは使っていないので分かりません。

>>4で書き込んだように
ブラウザに依存しないページを作りたいと思っています。
何か方策は無いでしょうか。

10 名前： 通りすがり ： 2006/12/16（土） 14:13 ID:UWsZexeD: >>9
>>6　のリンク先を読みましょう。
IEでは親要素（body）にtext-align:center;が必要です。
子要素内にまで継承されてしまうので、子要素（div）内を左寄せにしたいなら
子要素にtext-align:left;が必要になります。

11 名前：匿名： 2006/12/16（土） 14:13 ID:.u2aSHEu: >>6 Newのり太さん
>>10 通りすがりさん　　ご指導ありがとうございます。

>>6 のリンク先を参考にしてやってみたところ
IE6.0、Firefoxともにみごとに中央に表示されました。ほかのブラウザは試していません。

ちなみに

cssでは

#main1 { text-align: center; }
#main2 { margin-left: auto; margin-right: auto; }

htmlでは

<div id="main1">
<div id="main2">
画像、table、テキスト
</div>
</div>

としました。

12 名前：ＳＤ： 2006/12/16（土） 14:13 ID:.u2aSHEu: 連投すみません。
>>11 は私ＳＤです。

皆さんありがとうございました。

13 名前： key-child ： 2006/12/16（土） 14:13 ID:RGl3C7SI: もう、無駄かもしれませんが、誰も触れていないようなので・・・

IEの場合、表示モードが標準モードじゃないと
#main {
margin-left: auto;
margin-right: auto;
}
は機能しないはず。
（IE6では確認済み、IE7は？）

なので、標準モードになるようにDOCTYPE宣言を記述しましょう。
http://www.tagindex.com/html_tag/basic/doctype.html

14 名前：ＳＤ： 2006/12/16（土） 14:13 ID:.u2aSHEu: 問題点をクリアーできたかとおもったのですが。。。。

実は

<table border="2" align="center" summary="＊＊＊">テキスト</table>
<p align="center">テキスト</p>

という具合に、align="center"を多用していまして、これも何とかせねばと考えていました。

単純に
<table border="2" summary="＊＊＊">
<p>
としたところ、>>11　の記述のままではIE6.0だと中央表示されましたが、
Firefoxだと<table>が左端によってしまいました。<p>は中央でした。

>>13 key-childさん、ご指摘ありがとうございます。
DOCTYPE宣言は、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
としてあります。

ご指導お願いします。

15 名前： カヅサツ ： 2006/12/16（土） 14:13 ［URL］ ID:lY9L7AMa: > <table border="2" summary="＊＊＊">
> <p>
> としたところ、>>11　の記述のままではIE6.0だと中央表示されましたが、
> Firefoxだと<table>が左端によってしまいました。

tableの左右marginがauto になっていないからと思われます。

> <p>は中央でした。

恐らくセンタリングされているのは p要素の内容のテキストであり、p要素そのものではないと思われます。

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> としてあります。

それではダメなことが >>13 のリンク先に書いてあります。

16 名前： S´ｍｆ ： 2006/12/16（土） 14:13 ID:5ngCu.V6: 僕の問題は解決しました
どうも有難うございました。

17 名前： SD ： 2006/12/16（土） 14:13 ID:.u2aSHEu: >>15 カヅサツさんご指導ありがとうございます。

DOCTYPE宣言を
　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

cssで
　#main1 { text-align: center; }
　#main2 { margin-left: auto; margin-right: auto; }
　table { margin-left: auto; margin-right: auto; }

htmlでは
<body>
　<div id="main1">
　<div id="main2">
　<table border="2" summary="＊＊＊">テキスト</table>
　<p>テキスト</p>
　</div>
</div>
</body>

としたところ、
IE6.0、Firefoxともに中央に表示されました。ありがとうございます。

まだ1ページしか試していませんが、この記述でよろしいでしょうか。
不足、余分なものがあるでしょうか。

>>15　でご指摘のことを参考にしますと、
cssに
　　p { margin-left: auto; margin-right: auto; }
と記述すべきでしょうか。

18 名前： カヅサツ ： 2006/12/16（土） 14:13 ［URL］ ID:lY9L7AMa

> まだ1ページしか試していませんが、この記述でよろしいでしょうか。
> 不足、余分なものがあるでしょうか。

id属性値が "main2" である div要素が「これだけの材料だと」不要に見えますが、何がしたいのかによります。

> cssに
> 　　p { margin-left: auto; margin-right: auto; }
> と記述すべきでしょうか。

p要素そのものをセンタリングしたいなら、そうすべきです。
したくないなら不要です。

というか、SDさんは「要素の内容テキストをセンタリングする」と「要素そのものをセンタリングする」の違いがわかってないのでは。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
p{
	background-color: #CCF;
	width: 70%;
}
</style>
</head>
<body>
<p>
この要素そのものは左寄せで、内容テキストも左寄せです
</p>

<p style="margin-left: auto; margin-right: auto;">
この要素そのものはセンタリングで、内容テキストは左寄せです
</p>

<p style="text-align: center;">
この要素そのものは左寄せで、内容テキストはセンタリングです
</p>

<p style="margin-left: auto; margin-right: auto; text-align: center;">
この要素そのものはセンタリングで、内容テキストもセンタリングです
</p>

</body>
</html>

19 名前： SD ： 2006/12/16（土） 14:13 ID:.u2aSHEu: >>18 カヅサツさん何回もご指導ありがとうございます。

というか、SDさんは「要素の内容テキストをセンタリングする」と「要素そのものをセンタリングする」の違いがわかってないのでは。

ご指摘の通りだと思います。
丁寧な書き込みで、モヤモヤとしていたことがすっきりしたように思います。

今後も精進します。
カズサツさん、皆さんありがとうございました。