- ベストアンサー
CSSで画像・テーブルをウインドウの中央（上下・左右共）に表示したい！
前回は文字を一番下の中央に表示させたい質問をして、 回答を頂き出来るようになったのですが、今度は画像や テーブルをCSSを使ってウインドウの中央（上下・左右共） に表示させる方法が分らず困っています。 ご存知の方がおられましたら回答を宜しくお願いします。 このようにやってみましたが、画像やテーブルの縦の長さ に関係なく50％位置に配置されてしまい、上下に中央では なくなってしまいました。 position: absolute; top: 50%; width: 100%; text-align: center; いじょう宜しくお願いします。
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
垂直位置の指定に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だと思いますが・・・
その他の回答 (1)
- yumemiru-x
- ベストアンサー率45% (16/35)
この方法ではたしかに画面の中央に配置されページ全体の中央にならないかも・・・ どういうふうに表示させたいかいまいち分からない点もありますが、とりあえずページ全体に対しての中央というなら次の方法があります。 画像の場合・・・ background-image:url(xxx.img); background-position:center center; background-attachment:fixed; ・・・一応中央のつもり(¨;) テーブルの場合はちと難しい、なぜなら私も解らないから 対象になるレイヤーをおいて vertical-align:center; で真ん中にしてはいますが。 左右の中央は margin:auto; です 良い解決方法が見つかったら私にも教えてねm(__)m汗！
補足
回答どうもありがとうございます。 ページの中央というより、現在のブラウザのウインドウサイズの上下・左右共に、 中央の位置に背景ではなく、イメージ<img>とテーブル（１ページにどちらか1つ） を表示したいのです。 例えばブラウザのウインドウ（ページを表示できる領域）が1024x768だとしたら、 それを1280x1024等にしても中央に表示されるようにしたいです。 宜しくお願いします。
補足
回答どうもありがとうございます。 テーブルは単体でCSSを使用し中央に、 <img>も単体でCSSを使用し中央にしたいのです。 （テーブルの中にテーブル、テーブルの中に<img>ではなく） 宜しくお願いします。