CSSによるCENTERタグの実現方法
[上に]
[前に]
[次に]
zizz...
[HomePage]
1999/10/22(金) 20:20:05
<CENTER> 〜 </CENTER>, <DIV ALIGN="center"> 〜 </DIV>
と同等の表示をCSS2で行いたいのですが、方法が分かりません。
誰か知りませんか?
moci
[E-Mail]
1999/10/22(金) 20:33:47
text-align: center
ではいかがでしょう？
CSS1ですけど^^;
zizz...
[HomePage]
1999/10/22(金) 22:09:30
最初に書いておけば良かったな。
> text-align: center
> ではいかがでしょう？
> CSS1ですけど^^;
どうも"text-align: center;" は違うようです。
text-alignはブロックレベルエレメントに適用して、
そのボックス内のテキストの配置を指定するもので、
ボックス自身の配置を決めるのではないようです。
W3C CSS2 Specification
http://www.w3.mag.keio.ac.jp/TR/CSS2/text.html#alignment-prop
私もはじめは"text-align: center;"で良いと思っていたのですが、
Mozillaで期待通りに表示されなかったので。
以前同じようなCSSの表示に関してMozilla.orgにバグ報告した時は、
「これで仕様通り。間違っているのはMSIEとOperaの方」と言われ、
全世界に恥をさらしたので、（笑）
今回はW3Cの仕様書をちゃんと見ました。
ちなみに、Mozillaのhtml.css(多分UAのデフォルトスタイルシート）
center {
display: block;
text-align: -moz-center;
}
と-moz-centerという内部用と思われる値が指定してあります。
でもCSS2 Appendix A. A sample style sheet for HTML 4.0には
CENTER { text-align: center }
という例が載っています。
わけがわかりません。
アトム
1999/10/22(金) 23:49:34
>ボックス自身の配置を決めるのではないようです。
これで、何が知りたいかわかりました。
zizz... さんの場合、スタイルシートよりも
HTMLのタグに工夫が要ると思います。
ボックス自信の配置を制御するには、そのボックス（複数可）を<DIV>タグ
で囲み、そのDIVタグに対してスタイルシートを適用するようにします。
もともと<DIV>タグってこういう時のために有ると思うのですが。
（もちろん<DIV>タグの本当の意味は「ブロック要素のグループ化」ですが）
サンプル
<STYLE TYPE="text/css">
DIV {text-align: center}
</STYLE>
<BODY>
<DIV>
<P WIDTH=100>
AAAA<BR>
BB<BR>
</P>
</DIV>
======================
この場合制御したいタグが<P>タグなので、<DIV>タグを使わない場合と
表示に変化はないですが、<P>の代わりに<TABLE>タグを使うとよくわかると思います。
アトム
1999/10/22(金) 23:54:26
訂正
<P WIDTH=100>は、ただの<P>です。
TOM neko
[E-Mail]
1999/10/23(土) 02:03:23
CSS2では(CSS1でも)
プロックレベル要素をセンタリングする時は
margin-left:auto;
margin-right:auto;
と指定します。今の所対応しているブラウザはMozillaしか知りませ
んが。text-alignでブロックレベル要素がセンタリングされるのは、
仕様とは違います。
moci
[E-Mail]
1999/10/23(土) 04:33:29
なるほど。
ただ気になるのは、Mozillaもいま手元にあるM10ではtext-align:
centerにてブロック系要素をセンタリングしてしまうようです。
MSIEやOperaのバグに迎合したんでしょうか？
TOM neko
[E-Mail]
1999/10/23(土) 15:44:40
>MSIEやOperaのバグに迎合したんでしょうか？
バグ迎合モード？とそうでないモードを選べるという話も聞きまし
たが、残念ながら最新のMozillaを色々試せる環境じゃないので、確
認できません。
ブラウズする側から言えば、従来の慣習？で作られたページの表示
がめちゃくちゃになるのも残念ですから、それなりの配慮は欲しい
かも知れませんね。
zizz...
[HomePage]
1999/10/23(土) 18:17:41
> ただ気になるのは、Mozillaもいま手元にあるM10ではtext-align:
> centerにてブロック系要素をセンタリングしてしまうようです。
> MSIEやOperaのバグに迎合したんでしょうか？
私もM10を取ってきて確認すると、そうなりました。
背景に色をつけてわかったのですが、ブロックエレメントの横幅が最大化されていました。
これなら納得がいきます。
「これで仕様通り。間違っているのはMSIEとOperaの方」と言われたのは、
CSSという点では同じですが、別のプロパティーの話です。
センタリングされなかった理由も分かりました。
ぼけていたようで、インラインエレメントにtext-alignを適用していました。
結局"-moz-center"って何なんだ?
検証に使ったソース
----- BEGIN -----
<div style="background-color:silver;">
AAAA<br>SADFADDDDDDD
</div>
<center style="background-color:gray;">
AAAA<br>SADFADDDDDDD
</center>
<div align="center" style="background-color:silver;">
AAAA<br>SADFADDDDDDD
</div>
<div style="text-align:center; background-color:gray;">
AAAA<br>SADFADDDDDDD
</div>
<div style="text-align:-moz-center;background-color:silver;">
AAAA<br>SADFADDDDDDD
</div>
<div style="background-color:silver;width:50%;">
AAAA<br>SADFADDDDDDD
</div>
<center style="background-color:gray;width:50%;">
AAAA<br>SADFADDDDDDD
</center>
<div align="center" style="background-color:silver;width:50%;">
AAAA<br>SADFADDDDDDD
</div>
<div style="text-align:center; background-color:gray;width:50%;">
AAAA<br>SADFADDDDDDD
</div>
<div style="text-align:-moz-center;background-color:silver;width:50%;">
AAAA<br>SADFADDDDDDD
</div>
----- END -----
たーむ
1999/10/24(日) 03:25:40
<center style="background-color:gray;width:50%;">
<div align="center" style="background-color:silver;width:50%;">
でそんな差が出るとは思わなかった・・・
>結局"-moz-center"って何なんだ?
CENTERはNetscapeが勝手に作ったタグだ
と言うのを聞いた気がするんですが、
その動作に合うプロパティがなかったから
そういう記述になってるんじゃないですかね？
（あくまで憶測です）
TOM neko
[E-Mail]
1999/10/24(日) 04:44:39
あ。ブロックレベル要素をセンタリングしたいのではなかったので
すね。なるほど。
zizz...
[HomePage]
1999/10/25(月) 20:38:16
[[解決]]
一応問題は解決されたので、解決ボタンを押しておきます。
ありがとうございました。
[上に]
[前に]
[次に]