but I wish。
カレンダー
| 03 | 2024/04 | 05 |
| 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 |
リンク
最新記事
(07/31)
(07/17)
(07/17)
(07/15)
(07/13)
(07/10)
(07/09)
(07/09)
(07/09)
(07/07)
(07/05)
最新トラックバック
ブログ内検索
バーコード
アクセス解析
NINJA-Ad
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]を加えるだけです。
[ 縦方向センタリング ]
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
コメントの修正にはpasswordが必要です。任意の英数字を入力して下さい。