CSSで画像・テーブルをウインドウの中央（上下・左右共）に表示したい！

解決済

質問者：GX71
質問日時：2004/12/10 00:32
回答数：2件

前回は文字を一番下の中央に表示させたい質問をして、
回答を頂き出来るようになったのですが、今度は画像や
テーブルをCSSを使ってウインドウの中央（上下・左右共）
に表示させる方法が分らず困っています。
ご存知の方がおられましたら回答を宜しくお願いします。

このようにやってみましたが、画像やテーブルの縦の長さ
に関係なく50％位置に配置されてしまい、上下に中央では
なくなってしまいました。
position:absolute;
top:50%;
width:100%;
text-align:center;

いじょう宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： riaza
回答日時：2004/12/10 12:16

垂直位置の指定にvertical-alignというのがあるので、

いろいろと試してみましたが、どうやらtableの中でしか効果を発揮しないようです。

<body style="margin:0;">
<table style="position:absolute;top:0%;left:0%;width:100%;height:100%;">
<tr>
<td style="text-align:center;vertical-align:middle;">
<img src="img.jpg">
</td>
</tr>
</table>

一応、中央には表示されますがbodyでmarginをゼロにしてしまっているために、他の文字などにも影響が出てしまいます。

他に表示するものが無いのであれば、絶対位置指定をやめてbodyの直後にtableを記述すればokだと思いますが・・・

この回答への補足

回答どうもありがとうございます。

テーブルは単体でCSSを使用し中央に、
<img>も単体でCSSを使用し中央にしたいのです。

（テーブルの中にテーブル、テーブルの中に<img>ではなく）

宜しくお願いします。

補足日時：2004/12/10 12:48

通報する

- 0
- 件

通報する

No.1

回答者： yumemiru-x
回答日時：2004/12/10 09:25

この方法ではたしかに画面の中央に配置されページ全体の中央にならないかも・・・

どういうふうに表示させたいかいまいち分からない点もありますが、とりあえずページ全体に対しての中央というなら次の方法があります。

画像の場合・・・
background-image:url(xxx.img);
background-position:center center;
background-attachment:fixed;
・・・一応中央のつもり(¨;)

テーブルの場合はちと難しい、なぜなら私も解らないから
対象になるレイヤーをおいて vertical-align:center;
で真ん中にしてはいますが。
左右の中央は　margin:auto; です

良い解決方法が見つかったら私にも教えてねm(__)m汗！

この回答への補足

回答どうもありがとうございます。

ページの中央というより、現在のブラウザのウインドウサイズの上下・左右共に、
中央の位置に背景ではなく、イメージ<img>とテーブル（１ページにどちらか1つ）
を表示したいのです。

例えばブラウザのウインドウ（ページを表示できる領域）が1024x768だとしたら、
それを1280x1024等にしても中央に表示されるようにしたいです。

宜しくお願いします。

補足日時：2004/12/10 11:07

通報する