縦方向の真ん中表示

0   名前： さかな ： 2006/09/28（木） 09:47  ID:xxbFyAdW
一行テキストの場合、BOXの縦横のセンタリングをしていするのに　下記のような　ソースを見かけたのですが、 後方互換モード・標準モードのどの範囲まで、HTMLやXHTMLのバージョン・UAのバージョンはどの範囲まで、実現できるものなのでしょうか？私はIE6とFirefox1.0を利用しているのでそれ以外では　表示の確かめようがないので　スレッドを立てさせていただきました。
――――――――CSS
#mannaka{
width:100px;
height:50px;
line-height:50px;
}

――――――――HTML内
<div id="mananka">センタリング</div>

もちろん、id要素・DIVの指定に限ったことではありません。クラスセレクタでもパラグラフでもかまいません。
1   名前： さかな  ： 2006/09/28（木） 09:47  ID:xxbFyAdW
すいません　ソースに落ちがありました。

――――――――CSS
#mannaka{
　text-align:center;
　width:100px;
　height:50px;  /*縦方向は、ここから下です*/
　line-height:50px;
}


2   名前： 匿名 ： 2006/09/28（木） 09:47  ID:i4s77xzC
UA検証は他の方々にお願いするとして、CSS2仕様的には問題ないと思う。
ただし、絶対に2行以上にはなることはないという条件付で。

絶対に2行以上にならないならheight指定は不要。line-heightだけで十分。

height指定するんだったらoverflow:hiddenかautoした方が無難。
2行以上になったときでもそれなりに体裁を保てる。
まぁ、2行以上になった時点で縦センタリングではなくなるんだが（苦笑

あと、HTML・XHTMLのバージョンを気にされてるので余計な一言を言うと、
HTML4.0以降、原則としてdiv要素の直下に生テキストを置くことはできない。
# 例外として、Transitional DTDを宣言した場合のみ可能になる。
3   名前： さかな ： 2006/09/28（木） 09:47  ID:xxbFyAdW
>>さっそくありがとう御座います。
レガシーブラウザはさておき、モダンブラウザで問題なく利用できるのであれば、XHTML1.0 strict仕様で作成している　リストを使った一行のサイトマップ(ページのリンク)に利用しようと考えている次第で、スレッドを立てさせていただきました。
今は　positionプロパティleft・topで垂直方向のセンタリングに調整していますが、font-sizeを変更すると、再調整という次第です。

>あと、HTML・XHTMLのバージョンを気にされてるので余計な一言を言うと、
HTML4.0以降、原則としてdiv要素の直下に生テキストを置くことはできない。
# 例外として、Transitional DTDを宣言した場合のみ可能になる。

すっかり　抜けていました、ありがとう御座います。
4   名前： カヅサツ ： 2006/09/28（木） 09:47  ［URL］  ID:O5hEMlpW
>>2
> HTML4.0以降、原則としてdiv要素の直下に生テキストを置くことはできない。
> # 例外として、Transitional DTDを宣言した場合のみ可能になる。

いや、div要素の直下に生テキストを置くことはできます。HTML 4.01 の DTD を参照してください。
おそらく body要素と勘違いされていると思います。

もちろん、文書構造的に div要素直下の生テキストはおかしい、という意見は同意できます。
5   名前： 匿名 ： 2006/09/28（木） 09:47  ID:i4s77xzC
>>4
わーすまん、素で勘違いしてた。訂正マジで感謝。さかなさんごめん。

でまぁとりあえずOpera9.0p2とSafari2.0では問題なかった希ガス。
6   名前： さかな ： 2006/09/28（木） 09:47  ID:WETgBeNB
>>4,>>5
ありがとうございます。

XHTML1.0 strictにおいて、IE6とFirefox1.0では、問題なく表示されました、ひょっとして　これは便利かも？という感じです。

>もちろん、文書構造的に div要素直下の生テキストはおかしい、という意見は同意できます。

DIV要素は　それ自体が意味を持たないので、確かに直下の生テキストはおかしいですね、気が付きませんでした。DIVは音声ブラウザは　どのような表現をするのか　分かりませんが。

一覧へ戻る