CSS vertical-align 垂直の位置を指定するサンプル

vertical-alignは、インライン要素またはテーブルのセル要素で垂直の位置を表します。

目次 vertical-alignとは
インライン要素で指定(baseline、top、middle、bottom)
インライン要素で指定(text-top、text-bottom)
インライン要素で指定(super、sub)
インライン要素で指定(数値を指定)
テーブルのセル要素で指定(baseline、top、middle、bottom)

vertical-alignとは

書き方 vertical-align : 値
インライン要素またはテーブルのセル要素での垂直の位置を指定します。
インライン要素で指定 baseline・・・親要素のbaseline に揃えます。
top・・・行全体の上端に揃えます。
middle・・・親要素の中央に揃えます。
bottom・・・行全体の下端に揃えます。
text-top・・・親要素のフォントの上辺に揃えます。
text-bottom・・・親要素のフォントの下辺に揃えます。
super・・・上付き文字にします。
sub・・・下付き文字にします。
数値+単位
正の値は位置を上げます。負の値は位置を下げます。
数値+%
line-heightプロパティに対する割合です。正の値は位置を上げます。負の値は位置を下げます。
インライン要素とは
<p class="p1">
  テスト
  <span id="sp2">top</span>
</p>

3行目のspanがインライン要素です。
インライン(inline)要素を続けて記述した場合、画面上は横に並びます。
1行目のpタグはブロックレベル要素です。
ブロックレベル要素は縦に並びます。

テーブルのセル要素に対しての指定 baseline・・・baselineに揃えます。
top・・・上に揃えます。
middle・・・中央に揃えます。
bottom・・・下に揃えます。
ベースラインとは
ベースラインは、アルファベット等の文字での基準となる線です。
(下限を揃えるが、pの場合は下に抜ける)
初期値 baseline
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

インライン要素で指定(baseline、top、middle、bottom)

インライン要素で垂直の位置を指定するサンプルです。

テスト baseline top middle bottom

<style>
  .sp1 {
    vertical-align: baseline;
  }
  .sp2 {
    vertical-align: top;
  }
  .sp3 {
    vertical-align: middle;
  }
  .sp4 {
    vertical-align: bottom;
  }
  .p1 {
    border: 1px solid black;
    font-size: 16px;
    width: 300px;
  }
  .p1 span {font-size: 12px;}
</style>
<p class="p1">
  テスト
  <span class="sp1">baseline</span>
  <span class="sp2">top</span>
  <span class="sp3">middle</span>
  <span class="sp4">bottom</span>
</p>

 

インライン要素で指定(text-top、text-bottom)

text-topは親要素のフォントの上辺、text-bottomは親要素のフォントの下辺に揃えます。

<style>
  .sp5 {
    vertical-align: text-top;
  }
  .sp6 {
    vertical-align: text-bottom;
  }
  .p1 {
    border: 1px solid black;
    font-size: 16px;
    width: 300px;
  }
  .p1 span {font-size: 12px;}
</style>
<p class="p1">
  テスト
  <span class="sp5">text-top</span>
  <span class="sp6">text-bottom</span>
</p>

 

インライン要素で指定(super、sub)

superは上付き文字、subは下付き文字にします。

テスト super sub

<style>
  .sp7 {
    vertical-align: super;
  }
  .sp8 {
    vertical-align: sub;
  }
  .p1 {
    border: 1px solid black;
    font-size: 16px;
    width: 300px;
  }
  .p1 span {font-size: 12px;}
</style>
<p class="p1">
  テスト
  <span class="sp7">super</span>
  <span class="sp8">sub</span>
</p>

 

インライン要素で指定(数値を指定)

正の値は位置を上げます。負の値は位置を下げます。

テスト 10px -10px

テスト 10% -10%

<style>
  .sp9 {
    vertical-align: 10px;
  }
  .sp10 {
    vertical-align: -10px;
  }
  .sp11 {
    vertical-align: 10%;
  }
  .sp12 {
    vertical-align: -10%;
  }
  .p1 {
    border: 1px solid black;
    font-size: 16px;
    width: 300px;
  }
  .p1 span {font-size: 12px;}
</style>
<p class="p1">
  テスト
  <span class="sp9">10px</span>
  <span class="sp10">-10px</span>
</p>
<p class="p1">
  テスト
  <span class="sp11">10%</span>
  <span class="sp12">-10%</span>
</p>

 

テーブルのセル要素で指定(baseline、top、middle、bottom)

テーブルのセル要素で垂直の位置を指定するサンプルです。

baseline top middle bottom
<style>
  .td1 {
    vertical-align: baseline;
  }
  .td2 {
    vertical-align: top;
  }
  .td3 {
    vertical-align: middle;
  }
  .td4 {
    vertical-align: bottom;
  }
  .table1,td {
    border: 1px solid #000;
    width: 400px;
    height: 100px;
  }
</style>
<table class="table1">
  <tr>
    <td class="td1">baseline</td>
    <td class="td2">top</td>
    <td class="td3">middle</td>
    <td class="td4">bottom</td>
  </tr>
</table>

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS line-height 行の高さを指定するサンプル

△上に戻る