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

nas

CSSのvertical-alignプロパティで、インライン要素またはテーブルのセル要素で垂直の位置を指定するサンプルです。

目次

仕様 vertical-alignプロパティの仕様
  インライン要素とは
  ベースラインとは
サンプル インライン要素で垂直の位置を指定する
  テーブルのセル要素で垂直の位置を指定する

vertical-alignプロパティの仕様

vertical-align : 値

vertical-alignプロパティは、インライン要素またはテーブルのセル要素での垂直の位置を指定します。

１．インライン要素に対しての指定
値 説明
baseline 親要素のbaseline に揃えます。(初期値)
top 行全体の上端に揃えます。
middle 親要素の中央に揃えます。
bottom 行全体の下端に揃えます。
text-top 親要素のフォントの上辺に揃えます。
text-bottom 親要素のフォントの下辺に揃えます。
super 上付き文字にします。
sub 下付き文字にします。
数値+単位 正の値は位置を上げます。負の値は位置を下げます。
数値+% line-heightプロパティに対する割合です。正の値は位置を上げます。負の値は位置を下げます。
２．テーブルのセル要素に対しての指定
値 説明
baseline baselineに揃えます。(初期値)
top 上に揃えます。
middle 中央に揃えます。
bottom 下に揃えます。
値を継承しない

インライン要素とは

インラインとは、英語でinlineです。

<p class="p1">テスト<span id="sp2">top</span></p>

上記のコードでは、<span id="sp2">から</span>がインライン要素です。<p class="p1">から</p>はブロック要素です。

以下は、MDNのインライン要素の一覧のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements#Elements

ベースラインとは

ベースラインは、アルファベット等の文字での基準となる線です。
(下限を揃えるが、pの場合は下に抜ける)

以下は、MDNのベースラインのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/baseline

 

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 id="sp1">baseline</span>
  <span id="sp2">top</span>
  <span id="sp3">middle</span>
  <span id="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 id="sp5">text-top</span>
  <span id="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 id="sp7">super</span>
  <span id="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 id="sp9">10px</span>
  <span id="sp10">-10px</span>
</p>
<p class="p1">
  テスト
  <span id="sp11">10%</span>
  <span id="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 id="table1">
  <tr>
    <td id="td1">baseline</td>
    <td id="td2">top</td>
    <td id="td3">middle</td>
    <td id="td4">bottom</td>
  </tr>
</table>

関連の記事

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

△上に戻る