vertical-align

CSS の vertical-align は、HTML のインライン要素およびテキストに対して、垂直方向の揃え方を指定するプロパティである。

書式

vertical-align: align

属性値

vertical-alignプロパティには次に示す属性を指定することができる。

align
テキストの縦方向の位置を次の値の中から指定する。
値 意味
baseline ベースライン(xの下端を基準とした線)
middle 中央合わせ
sub 下付き文字
super 上付き文字
text-top テキストの上限合わせ
text-bottom テキストの下限合わせ(yの下端を基準とした線)
top 上端
bottom 下端
inherit 継承
length baselineからの相対位置(上方向)
percentage line-height属性に対するパーセンテージ

プロパティ詳細

デフォルト値 baseline
適用対象 インラインレベル要素及びテーブルセル要素
継承 しない
バージョン CSS1

使用例

次にスタイルシート属性vertical-alignを使用したHTMLの例を示す。

<div style="font-size:xx-large;">
  <span style="vertical-align:baseline;">baseline</span>
  <span style="vertical-align:middle;">middle</span>
  <span style="vertical-align:sub;">sub</span>
  <span style="vertical-align:super;">super</span>
  <span style="vertical-align:text-top;">text-top</span>
  <span style="vertical-align:text-bottom;">text-bottom</span>
  <span style="vertical-align:top;">top</span>
  <span style="vertical-align:bottom;">bottom</span>
</div>

上記HTMLの出力は次のとおり。

baseline middle sub super text-top text-bottom top bottom

vertical-alignに長さとパーセンテージを指定した例を示す。

<div style="font-size:xx-large;">
  <span style="vertical-align:baseline;">baseline</span>
  <span style="vertical-align:1em;">1em</span>
  <span style="vertical-align:-1em;">-1em</span>
  <span style="vertical-align:100%;">100%</span>
  <span style="vertical-align:-100%;">-100%</span>
</div>

上記HTMLの出力は次のとおり。

baseline 1em -1em 100% -100%

表示結果はWebブラウザにより異なることがある。

JavaScript

JavaScriptからは要素オブジェクトの style.verticalAlign プロパティで vertical-align を参照及び設定できる。

<p id="example">example</p>
<script>
  document.querySelector("#example").style.verticalAlign = "baseline";
</script>

関連記事

参考文献

World Wide Web Consortium (2022) CSS 2