but I wish。
カレンダー
| 01 | 2025/02 | 03 |
| 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 |
リンク
最新記事
(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
