[CSS] ブロック要素を画面中央に表示
今回は、CSSとDIVのみで、単一のブロック要素を画面中央に表示するものを作ってみました。
特にCSSのみでIE6に対応させるために、かなりトリッキーなことをしていますが詳しい説明は省略します。（笑）
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
特にCSSのみでIE6に対応させるために、かなりトリッキーなことをしていますが詳しい説明は省略します。（笑）
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
ソースコードは、次の通り。
仮のサイズとして320x240のブロック要素を画面中央に表示しているため、この数値を変更するときは、.halfbox で120と書かれた数値を、高さ半分の数値に差し替える必要があります。
画面サイズがブロック要素のサイズよりも小さくなったときは、ブロック要素の左上が原点となるようにしています。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_centerbox.html(別ウィンドウ表示)
<!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>
|
画面サイズがブロック要素のサイズよりも小さくなったときは、ブロック要素の左上が原点となるようにしています。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_centerbox.html(別ウィンドウ表示)
| 固定リンク
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
この記事へのコメントは終了しました。
コメント