/* CSS、スタイルシート質問スレッド【11】 */
正しいかどうかはちとわからないんだけど（initial containing blockとかもわからなかったし）
CSSでページ領域の真中表示できた。
以下必要部分書いてみます。
html, body { margin:0px; padding:0px; width:100%; height:100%; }
h1 { line-height:1; position:relative; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center; top:50%; }
.header { position:relative; top:-0.5em; }
<body>
<h1><span class="header">まんなか</span></h1>
</body>
これは文字だけどimgとかブロックとかでも.headerのtopをうまく書き換えればいけると思う。
どうでしょ？ いちおうMozilla1.0.1とIE6SP1では確認しますた。
なんかCSS的にまずいとこあるかな？
CSSでページ領域の真中表示できた。
以下必要部分書いてみます。
html, body { margin:0px; padding:0px; width:100%; height:100%; }
h1 { line-height:1; position:relative; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center; top:50%; }
.header { position:relative; top:-0.5em; }
<body>
<h1><span class="header">まんなか</span></h1>
</body>
これは文字だけどimgとかブロックとかでも.headerのtopをうまく書き換えればいけると思う。
どうでしょ？ いちおうMozilla1.0.1とIE6SP1では確認しますた。
なんかCSS的にまずいとこあるかな？
|
|
|
940 ：Name_Not_Found：02/10/15 12:43 ID:???
>>930
スレ違いっぽい話題をあんまり引きずりたくないんだけど、
改行をコメントアウトして空白文字として出さない、って小技を見たことがある。
〜〜〜行末<!--[改行]
-->行頭〜〜〜
全部の改行にかけるとすると、ちょっと馬鹿馬鹿しいけど。
スレ違いっぽい話題をあんまり引きずりたくないんだけど、
改行をコメントアウトして空白文字として出さない、って小技を見たことがある。
〜〜〜行末<!--[改行]
-->行頭〜〜〜
全部の改行にかけるとすると、ちょっと馬鹿馬鹿しいけど。
941 ：Name_Not_Found：02/10/15 12:54 ID:uiSrQ8pk
>>941
あぁ・・・Operaの存在忘れてました（すまそ）
NN4.ｘは無視の方向です。 NN4.ｘのこと考えるとそもそもCSSなんか使えないですし。
んー、Operaで表示されないってのはOperaが駄目なのかCSSでやっちゃいけないこと
やってるのか・・・ちとOperaでの検証してみます。
あぁ・・・Operaの存在忘れてました（すまそ）
NN4.ｘは無視の方向です。 NN4.ｘのこと考えるとそもそもCSSなんか使えないですし。
んー、Operaで表示されないってのはOperaが駄目なのかCSSでやっちゃいけないこと
やってるのか・・・ちとOperaでの検証してみます。
943 ：Name_Not_Found：02/10/15 13:46 ID:uiSrQ8pk
>>939
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}
>>939を下の通りに直せば、OperaでもIE6でもN7でも真ん中配置になる。
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}
946 ：Name_Not_Found：02/10/15 13:59 ID:???
>>939-945
しかしオペラだけなぜposition:relative;ではうまくゆかなかったんですかね。
どんな計算してるのかなあ？ positioning算出のバグか？ 理窟がよくワカラン。
誰かわかったら、こちらへ報告してくれませんか。
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/l50
しかしオペラだけなぜposition:relative;ではうまくゆかなかったんですかね。
どんな計算してるのかなあ？ positioning算出のバグか？ 理窟がよくワカラン。
誰かわかったら、こちらへ報告してくれませんか。
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/l50