5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

CSS/DHTMLバグ辞典スレッド ver2.0

589 :Name_Not_Found:02/10/16 10:26 ID:???
質問スレッドより転記します。
http://pc3.2ch.net/test/read.cgi/hp/1031773943/939-946
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では確認しますた。
【Opera6】
でもOpera6では上の方に配置されるね。垂直方向の中心にはならない。
下の通りに直せば、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%;/*←変更箇所*/
}

【MacIE】http://pc3.2ch.net/test/read.cgi/hp/1031773943/966
MacIE5.0/5.1ともに駄目だった。
MacIE は、height の単位を % にすると横幅を基準に値を決めているもよう。
つまり、"height:100%;" なら その要素の縦幅はウィンドウの横幅と同じになり、
横幅 > 縦幅 なウィンドウでは、無駄な縦スクロールバーが出現することになり。
html, body { margin:0; padding:0; width:100%; }
h1 { line-height:1; margin:0; padding:0; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;}
height:100%; を削って、以上の記述にすると、MacIE 5.x でもおおかた意図する表示になるようです。

304 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)