vertical-align（テキストの縦方向の位置について）

illustrator css フォント

vertical-alignプロパティは行の中のテキストや画像の位置を指定します。
webだけでなくDTPにおいても知って損のない、綺麗な文章を組むのに必要な知識なので覚書します。

値の主な位置

(1)行の高さはline-hight。
そこから,topとbottomが決められます。


(2)親要素のフォントサイズ=1em。
ここではtext-topとtext-bottomの位置が割り当てられ、小文字の"x"の交差点がちょうどmiddleの位置を決定するので、そこから上はsuper、ベースラインまで下がsubとなります。


(3)vertical-alignの値に何も設定していないと初期値のbase-lineが割り当てられます。


フォーマットとなるコード。

HTMLコード

<h3>vertical-align:baseline</h3>
<div class="vertical-align">
<span id="large">行</span>
<span id="format">Vertical-align(x)<span class="※ここにプロパティ値と同名のクラス名が入ります。">baseline</span></span>
</div>

CSSコード

.vertical-align {
  background-color: #ccccff;
  margin-bottom: 10px;
}
.vertical-align span#large {
  font-size: 48px;
}
.vertical-align span#format {
  font-size: 36px;
  background: #EAC2C3;
}
.vertical-align span.small {
  font-size: 24px;
  background: #427DF8;
}
.vertical-align #※ここにプロパティ値と同名のクラス名が入ります {
  vertical-align: プロパティ値;
}

出力結果