ブラウザの縦横中央に表示させたい
-
0 名前： eanak ： 2005/07/14 00:35
- webページを作成しています。
作成しているページの縦横サイズが小さいので
ブラウザの中央（縦横）に表示させたいと思っています。
HTMLタグでも、スタイルシートでもかまいません。
確認したいブラウザとして
win : IE NN4.73 Firefox
mac : IE Saferi Firefox
ご存知のかた、いらっしゃいませんでしょうか？
-
1 名前： Pid ： 2005/07/14 00:35
- えーと，Netscape はもう ver.8 まで出ているのですが，それでも 4.73 に対応させるのですか (^^;)。
> 作成しているページの縦横サイズが小さいので
「小さい」と一口に言っても，利用者のウィンドウサイズはもっと「小さい」可能性があるので（たとえば携帯電話など），どこまで射程に入れるかですね。
横中央は簡単だと思います（CSS で width を明示して { margin: auto; }）。
縦中央は，IE，NN4 以外なら以下の方法でできます（議論が複雑なので，後半をじっっくりお読み下さい）
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
しかし，どうしても NN4 対応が必要なら，table 要素でレイアウトせざるをえないでしょう。
-
2 名前： Pid ： 2005/07/14 00:35
- NN 4.73（とスクリプト機能オフの WinIE）さえ無視できるのであれば，以下のように書けます（無視といってもスタイルを無視するだけで，内容自体は問題なく読めます）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>縦横中央配置</title>
<style type="text/css">
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-row;
}
/*body >*/ div {
padding: 0 30%;
display: table-cell;
vertical-align: middle;
}
/* 以下はスクリプト機能が有効時の WinIE に対する指定 */
div {
_position: expression('absolute');
_top: expression(((documentElement.clientHeight || body.clientHeight) - this.clientHeight) / 2 + 'px');
_left: expression(((documentElement.clientWidth || body.clientWidth) - this.clientWidth) / 2 + 'px');
}
</style>
</head>
<body>
<div>
<h1>見出し</h1>
<p>文章。</p>
</div>
</body>
</html>
