alignment-baseline

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

alignment-baseline 屬性指定物件與其父物件如何對齊。此屬性指定此元素的哪個基線應與父元素的相應基線對齊。例如，這允許羅馬文字中的字母基線在字型大小變化時保持對齊。其預設值是與計算出的 alignment-baseline 屬性值同名的基線。

注意： 作為演示屬性，alignment-baseline 還有一個對應的 CSS 屬性：alignment-baseline。當兩者都指定時，CSS 屬性具有優先權。

你可以將此屬性與以下 SVG 元素一起使用

用法說明

值	`auto` \| `baseline` \| `before-edge` \| `text-before-edge` \| `middle` \| `central` \| `after-edge` \| `text-after-edge` \| `ideographic` \| `alphabetic` \| `hanging` \| `mathematical` \| `top` \| `center` \| `bottom`
預設值	`auto`
可動畫的	是

auto 已棄用: 該值是字元所屬指令碼的 dominante-baseline —— 即，使用父元素的 dominante-baseline。
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: 要對齊的物件中的對齊點與父文字內容元素的“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 屬性一起使用。

示例

html

<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">A hanging</text>

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

  <text alignment-baseline="baseline" x="60" y="110">A baseline</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 內聯佈局模組級別 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty

瀏覽器相容性

另見

CSS alignment-baseline 屬性
CSS 基線對齊

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 2025年6月23日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的連結問題