忍者ブログ
but I wish。
カレンダー
06 2017/07 08
S M T W T F S
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
プロフィール
HN:
shu。
年齢:
32
HP:
性別:
男性
誕生日:
1985/01/15
職業:
Programmer。
最新コメント
[10/21 ai]
ブログ内検索
アーカイブ
バーコード
アクセス解析
NINJA-Ad
[7] [6] [5] [4] [3] [2] [1
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSによる縦方向センタリング、画面中央表示の方法です。

[ 縦方向センタリング ]

Sample Source
Sample Page

まず、適当な大きさのボックスを作ります。(サンプルでは縦100px/横200px)
それを[position:absolute]で[top:50%]の位置に置きます。
そして、そこから[margin-top:-50px]でボックスの半分の分だけ、上方向へずらします。
以上で縦方向へのセンタリングは完了です。

また、ボックス内での縦方向センタリングはボックスの[height]と[line-height]を同じ値にする事で実現しています。

[ 画面中央表示 ]

Sample Source
Sample Page

画面中央表示は、上記の縦方向センタリングに、[left:50%]と[margin-left:-100px]を加えるだけです。

PR
Comment
name 
title 
color 
mail 
URL
comment 
pass    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
コメントの修正にはpasswordが必要です。任意の英数字を入力して下さい。
この記事へのトラックバック
この記事にトラックバックする:
Shu's Dog-ear
Twitter
Kenn's Clairvoyance
Eriko Blog
kiriya.com





Template by Crow's nest  忍者ブログ  [PR]