« [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear | トップページ | [CSS] divのみで縦横可変幅の縦の三段組 »

2011年6月25日 (土)

[CSS] ブロック要素を画面中央に表示

今回は、CSSとDIVのみで、単一のブロック要素を画面中央に表示するものを作ってみました。
特にCSSのみでIE6に対応させるために、かなりトリッキーなことをしていますが詳しい説明は省略します。(笑)
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
Photo
ソースコードは、次の通り。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ブロック要素を画面中央に表示</title>
<style type="text/css"><!-- 
  html,body {margin:0px; height:100%;}
  body {_display:table-cell; text-align:center; _white-space:nowrap;}
  .halfbox {margin:0px auto -120px; min-height:120px; height:50%; _width:0px; _height:100%;}
  .centerbox {margin:0px auto; width:320px; height:240px; background:#887; text-align:left;}
  .ie6div {_display:inline; _zoom:1; _vertical-align:middle; _margin:0px;}
--></style>
</head>

<body>
  <div class="halfbox ie6div"><br></div>
  <div class="centerbox ie6div">ブロック要素を画面中央に表示</div>
</body>
</html>
仮のサイズとして320x240のブロック要素を画面中央に表示しているため、この数値を変更するときは、.halfbox で120と書かれた数値を、高さ半分の数値に差し替える必要があります。
画面サイズがブロック要素のサイズよりも小さくなったときは、ブロック要素の左上が原点となるようにしています。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_centerbox.html(別ウィンドウ表示)

|

« [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear | トップページ | [CSS] divのみで縦横可変幅の縦の三段組 »

HTML・CSS・JS関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: [CSS] ブロック要素を画面中央に表示:

« [mixiアプリ] ハルフィとどんぐりの森 : Lv25、World5AllClear | トップページ | [CSS] divのみで縦横可変幅の縦の三段組 »