HTML - 上下左右中央揃え

October 08 [Thu], 2009, 15:53
■HTMLのソースの覚書

ホームページを作るとき、index.htmlがコンテンツではなく、入り口になったものを作ろうと思った。
で、画像を一枚挿入し、上下左右中央揃えにしたかった。
※ブラウザで見たとき、ブラウザを最大化しようが小さくしようが上下左右中央揃えにしたかった。

左右中央揃えはtableに入れるなり、cssでpaddingなりmarginなりを入れて50%だのにすればOK。
だが、なんとも上下は中央に揃わない。
paddingなりmarginで50% 50%と上下・左右と割り振ってみても、tableでwidth="100%" height="100% cellpadding="0" cellspacing="0"と入れても、trなりtdにvalign="middle" align="center"と入れても、さらには背景(background)にして50%と左右中央にはなってくれてもどうしても上下で中央にはなってくれなかった。

そう。CSSなりなんなり、左右を中央揃えるに方法はたくさんあるもんだが、なんとも上下に中央…とはならないものだ。と奮闘した。



ちなみにIEだと上記の方法でこんな風になんとかなったりした。



その時のFX(ファイヤーフォックス)ではこんなん。
ありえない…orz

で、ここ2日程色々見てみたが、解決方法がなく諦めかけていた…が、ごくごく簡単に設定ができた。
もったいぶって記事を書いているようだが、CSSファイルでもheadのCSSに直でもいいが…
html{height:100%}
と書いたら万事解決★


FXでの上下左右中央揃え。できたー!!


ただし、他にもコンテンツがある場合などはちょっと面倒になるかも…

以下、見つけたサイトで抜粋。
--------------------------------※OperaでもFirefoxと同じ表示になる
※CSSに「html{height:100%}」を追加すると、IEと同じ表示になる
※理由:<body>〜</body>に中身がない(これを「body要素が空っぽ」という)ため、FirefoxやOperaはbody要素の高さを0として扱う。つまりウィンドウ内の上端に、高さ0の領域があることになる。そう考えると、Firefoxの表示結果は整合性がある
※IEは、表示領域をウィンドウ内全体とする派なのかも?--------------------------------
との事でした。

とりあえず…indexで画像一枚なら…これでできた◎

※追記。ソースの詳細はこちらをご覧下さい。
  • URL:http://yaplog.jp/mokettyo/archive/896
Comment
小文字 太字 斜体 下線 取り消し線 左寄せ 中央揃え 右寄せ テキストカラー リンク 絵文字 プレビューON/OFF
画像認証  [画像変更]
画像の文字 : 
利用規約に同意
 X 
禁止事項とご注意
※本名・メールアドレス・住所・電話番号など、個人が特定できる情報の入力は行わないでください。
「ヤプログ!利用規約 第9条 禁止事項」に該当するコメントは禁止します。
「ヤプログ!利用規約」に同意の上、コメントを送信してください。
2009年10月
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
ラベル素材一覧
アイコン画像【CDラベル】
アイコン画像アーティスト別
アイコン画像■あ行
» エイミー・ワインハウス -Back to Black-
アイコン画像【DVDラベル】
» 研修用
» ひとり交換日記
最新コメント
アイコン画像たけやん
» 【CDラベル】クレイジーケンバンド -Spark Plug- (2014年10月02日)
アイコン画像琳子
» 【CDラベル】槇原敬之 -Listen To The Music 3- (2014年09月25日)
アイコン画像たけやん
» 【CDラベル】槇原敬之 -Listen To The Music 3- (2014年09月23日)
アイコン画像琳子
» 【CDラベル】歌姫クロニクル 1985〜2000 (2014年09月02日)
アイコン画像琳子
» 【CDラベル】歌姫クロニクル 1968〜1984 (2014年09月02日)
アイコン画像琳子
» 【CDラベル】K -On My Journey- (2014年09月02日)
アイコン画像とも
» 【CDラベル】歌姫クロニクル 1985〜2000 (2014年09月02日)
アイコン画像とも
» 【CDラベル】歌姫クロニクル 1968〜1984 (2014年09月02日)
アイコン画像とも
» 【CDラベル】K -On My Journey- (2014年09月02日)