alignment-baseline

auto 非推奨;

この値はその文字が所属する書法の主要ベースラインです。すなわち、親の主要ベースラインを使用します。

baseline

親の dominant-baseline の選択を使用します。ボックスの対応するベースラインを親のベースラインと一致させます。

before-edge 非推奨;

配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "before-edge" ベースラインに配置されます。

text-bottom

ボックスの底辺と親コンテンツエリアの上端を一致させます。

text-before-edge

配置されるオブジェクトの配置点は、親テキストコンテンツ要素の"text-before-edge" ベースラインに配置されます。

メモ: このキーワードは text-top に対応付けられることがあります。

middle

ボックスの縦方向の中点を、親ボックスのベースラインと親の x 高の半分に配置します。

central

ボックスの中央ベースラインを親の中央ベースラインと一致させます。

after-edge 非推奨;

配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "after-edge" ベースラインと揃えられます。

text-top

ボックスの上端と親コンテンツエリアの上端を一致させます。

text-after-edge

配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "text-after-edge" ベースラインに配置されます。

メモ: このキーワードは text-bottom に対応付けられることがあります。

ideographic

ボックスの表意文字の文字面のベースラインを、その親のベースラインと一致させます。

alphabetic

ボックスのアルファベットのベースラインを親のベースラインと一致させます。

hanging

配置されるオブジェクトの配置点は、親テキストコンテンツ要素の「ぶら下がり」ベースラインに揃えられます。

mathematical

ボックスの数式用のベースラインを親のベースラインと一致させます。

top

配置されたサブツリーの先頭を、行ボックスの先頭に揃えます。

center

配置されたサブツリーの中心を行ボックスの中心に合わせます。

bottom

配置されたサブツリーの底辺を行ボックスの底辺に揃えます。

SVG 2 では、このプロパティの定義にいくつかの変更が加えられました。具体的な変更点としては、auto、before-edge、after-edge の値が除去されました。後方互換性を維持するために、text-before-edge は text-top に、 text-after-edge は text-bottom に割り当てられる可能性があります。 text-before-edge および text-after-edge は、 vertical-align プロパティと併用しないようにしましょう。

<svg
  width="300"
  height="120"
  viewBox="0 0 300 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,10 L60,110
              M30,10 L300,10
              M30,65 L300,65
              M30,110 L300,110
              "
    stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">ぶら下がり</text>

  <text alignment-baseline="middle" x="60" y="65">中央</text>

  <text alignment-baseline="baseline" x="60" y="110">ベースライン</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style>
    <![CDATA[
      text{
        font: bold 36px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

他の要素（<text> など）におけるオブジェクトの配置については、 dominant-baseline を参照してください。

• CSS の alignment-baseline プロパティ
• CSS ベースライン配置