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

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

vertical-alignとは

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>