メインコンテンツへ移動するサイト内検索へ移動する

タイポグラフィ（レイアウト）

vertical-align

文字の縦方向の配置を指定する

下表の「自身の要素」の位置を、「親要素」の位置と合わせます。

value自身の要素親要素
baselineベースライン[*]ベースライン
middle中央ベースライン + x-height[*]の半分
top上端行ボックス[*]の上端
bottom下端行ボックス[*]の下端
text-top上端フォントサイズの上端
text-bottom下端フォントサイズの下端
sup上端上付き文字のベースライン
sub下端下付き文字のベースライン

Demo

Appendixtoptext-topmiddlebaselinetext-bottombottom

AppendixSubSupsubsup

<div>
  <p class="parent">
    Appendix
    <span class="child child-1">top</span>
    <span class="child child-2">text-top</span>
    <span class="child child-3">middle</span>
    <span class="child child-4">baseline</span>
    <span class="child child-5">text-bottom</span>
    <span class="child child-6">bottom</span>
    <span class="support-line" />
    <span class="support-line-2" />
  </p>
  <p class="parent">
    Appendix
    <sub>Sub</sub>
    <sup>Sup</sup>
    <span class="child child-7">sub</span>
    <span class="child child-8">sup</span>
  </p>
</div>

.child-1 {
  vertical-align: top;
}
.child-2 {
  vertical-align: text-top;
}
.child-3 {
  vertical-align: middle;
}
.child-4 {
  vertical-align: baseline;
}
.child-5 {
  vertical-align: text-bottom;
}
.child-6 {
  vertical-align: bottom;
}
.child-7 {
  vertical-align: sub;
}
.child-8 {
  vertical-align: super;
}

.parent {
  font-size: 36px;
  border-top: 1px solid rgb(56, 189, 248);
  border-bottom: 1px solid rgb(56, 189, 248);
  position: relative;
  padding: 0 4px;
}
.child {
  font-size: 12px;
  margin: 0 4px;
  line-height: 1;
  background: rgb(255 255 255 / 0.3);
  padding: 0 2px;
}
.support-line {
  position: absolute;
  inset: 0;
  margin: 12px 0;
  pointer-events: none;
  border-top: 1px solid rgba(56, 189, 248, 30%);
  border-bottom: 1px solid rgba(56, 189, 248, 30%);
}
.support-line-2 {
  position: absolute;
  inset: 0;
  margin: 18px 0;
  pointer-events: none;
  border-bottom: 1px solid rgba(56, 189, 248, 30%);
}

概要

行ボックスの中で、縦方向の配置を指定します。文の中に、サイズの小さい文字が含まれる場合、下に揃えたり、上に揃えたり、中央に揃えたりすることができます。

上に揃える場合でも、行の上端に揃えたり（top）、文字の上端に揃えたり（text-top）する選択肢があります。

CSS の中でもわかりづらく、よくハマるプロパティでもあります。

注意事項

行などのインライン要素、インラインブロック要素、表のセルブロック要素でのみ使えるプロパティです。プロパティを見て分かる通り、親要素の行ボックスに依存した配置を行うものであり、ブロック要素の中央揃えを行うものではないからです。

ブロック要素の垂直方向の中央揃えを行う場合は、justify-contentやalign-itemsを用います。

ユースケース

専ら、文頭や文末に挿入されるアイコンの位置を調整するのに使われることが多いです。この使い方を押さえておけば良いでしょう。

ロゴ GITHUB

<div class="wrapper">
  <p class="button">
    <img src="/github.png" alt="ロゴ" class="img" />
    GITHUB
  </p>
</div>

.img {
  vertical-align: -12px;
  display: inline;
  margin-right: 4px;
  width: 36px;
  height: 36px;
}
.button {
  line-height: 2;
}

用語

ベースライン

アルファベットの基準となる線です。g、j、p、q、yなどは、ベースラインより下に突き出ていることに注意してください。

abcdefghijklmnopqrstuvwxyz

行ボックス

文章などの行を囲むボックスです。高さはline-heightの値により設定されます。

abcdefghijklmnopqrstuvwxyz

x-height

アルファベットの小文字のxの高さです。a, cなどの、上下に突き出ないアルファベットの高さと言い換えることもできます。

abcdefghijklmnopqrstuvwxyz

関連

  • flex デザイン
  • 中央揃え

参照