インライン要素の縦位置を指定するには、「vertical-align」を使用します。
サンプル
例）インライン要素を上寄せにする
vertical-align:top;
|
1 2 3 |
<div> <div style="display:table-cell;height:100px;vertical-align:top;">あいうえお</div> </div> |
【結果】
あいうえお
例）中寄せにする
vertical-align:middle;
|
1 2 3 |
<div> <div style="display:table-cell;height:100px;vertical-align:middle;">あいうえお</div> </div> |
【結果】
あいうえお
例）下寄せにする
vertical-align:bottom;
|
1 2 3 |
<div> <div style="display:table-cell;height:100px;vertical-align:bottom;">あいうえお</div> </div> |
【結果】
あいうえお
備考
- 上記例のように、divタグ内でvertical-alignプロパティを有効にするには、display:table-cellとheightの指定が必要です。
- ブロック要素とインライン要素については以下をご覧ください。
⇒[HTML] ブロック要素とインライン要素
コメント