CSS3

プロパティ

alignment-baseline

→● mdn

整列基底線の種別¶仕様のみ。

このプロパティは、ボックスの 整列基底線 を指定する。それは、ボックスを ─ 整列後のずらしが適用可能なら、それを適用するに先立って ─ 整列するために利用される基底線を与える。

baseline

親ボックスが選んだ支配的な基底線を利用する。

abc

abc

text-bottom

text-under 基底線を利用する。

alphabetic

alphabetic 基底線を利用する。

ideographic

ideographic-ink-under 基底線を利用する。

middle

x-middle 基底線を利用する ─ だだし、text-orientation が upright の下では（alphabetic、x-height 両基底線とも本質的に意味がないので）、central 基底線を利用する。

<DIV style="border:1px solid black; height:100px;
 display:flex;
 align-items:center;
">
 <DIV style="alignment-baseline:middle; font-size:40px; border:1px solid red;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="alignment-baseline:baseline; font-size:40px; border:1px solid black;">3</DIV>
</DIV>

central

central 基底線を利用する。

mathematical

math 基底線を利用する。

text-top

text-over 基底線を利用する。

これらの値は、基底線整列を遂行するときに［ボックスの、どの基底線が ボックスが属する整列文脈の対応する基底線に整列されるか］を指定する。（行内整形文脈においては、行内レベルの［ボックス断片／グリフ］は、それらの親の行内ボックス断片により確立された基底線整列を、親の行内軸沿いに共有する【親が行内ボックスであるならば】。他の整形文脈における基底線整列は、[CSS-ALIGN-3] § 基底線整列のグループ分け を見よ）。SVG テキスト レイアウトにおいては、これらの値は、代わりに SVG の現在のテキスト位置に整列される基底線を指定する。

¶省くSVG…

テスト