[CSS] ブロック要素の縦位置を指定する
ブロック要素（p要素やdiv要素など）の縦位置指定に関するサンプルです。
やり方はいろいろあると思いますが、ここで紹介する方法はvertical-alignを使う方法です。
しかしvertical-alignは通常、ブロック要素では使用できないので、
「display:table-cell」指定でインライン要素とみなして適用させています。
ブロック要素の縦表示位置を指定する
例）上寄せにする
|
1 2 3 4 5 |
div.sample{ height:100px; display:table-cell; vertical-align:top; } |
|
1 2 3 |
<div class="sample"> <p>あいうえお</p> </div> |
【結果】
あいうえお
デフォルト上寄せなので、この指定をしなくても自動的に上寄せになります。
例）上下中央寄せにする
|
1 2 3 4 5 |
div.sample{ height:100px; display:table-cell; vertical-align:middle; } |
|
1 2 3 |
<div class="sample"> <p>あいうえお</p> </div> |
【結果】
あいうえお
例）下寄せにする
|
1 2 3 4 5 |
div.sample{ height:100px; display:table-cell; vertical-align:bottom; } |
|
1 2 3 |
<div class="sample"> <p>あいうえお</p> </div> |
【結果】
あいうえお
備考
- ブロック要素とインライン要素については以下をご覧ください。
→[HTML] ブロック要素とインライン要素