alignment-baseline

可用性有限

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

alignment-baseline CSS 屬性指定用於對齊框的文字和行內級內容的特定基線。基線對齊是對齊上下文中多個對齊主體基線之間的關係。執行基線對齊時，alignment-baseline 屬性值指定框的哪個基線與其對齊上下文的相應基線對齊。

注意：alignment-baseline 屬性僅對行內級框、彈性專案、網格專案、表格單元格以及 <text>、<textPath> 和 <tspan> SVG 元素有效。如果存在，它會覆蓋形狀的 alignment-baseline 屬性。

在行內格式化上下文中，行內級框片段和字形沿其行內軸共享由其父行內框片段建立的對齊上下文。在 SVG 文字佈局中，這些值改為指定與 SVG 當前文字位置對齊的基線。

語法

css

/* Initial value */
alignment-baseline: baseline;

/* Keyword values */
alignment-baseline: alphabetic;
alignment-baseline: central;
alignment-baseline: ideographic;
alignment-baseline: mathematical;
alignment-baseline: middle;
alignment-baseline: text-bottom;
alignment-baseline: text-top;

/* Mapped values */
alignment-baseline: text-before-edge; /* text-top */
alignment-baseline: text-after-edge; /* text-bottom */

/* Deprecated values  */
alignment-baseline: auto;
alignment-baseline: before-edge;
alignment-baseline: after-edge;
alignment-baseline: hanging;

/* Global values */
alignment-baseline: inherit;
alignment-baseline: initial;
alignment-baseline: revert;
alignment-baseline: revert-layer;
alignment-baseline: unset;

值

baseline: 使用父級的 dominant-baseline 值。
alphabetic: 用於書寫拉丁語、西里爾語、希臘語和許多其他文字；將框的字母基線與其父級的字母基線對齊，對應於大多數（但不是所有）字元的底部。
central: 將框的中心基線與其父級的中心基線對齊，對應於表意文字的中心基線，位於表意文字的下基線和上基線之間。
ideographic: 將框的表意字元面下側基線與其父級對齊，使用字型中表意文字基線表構建的派生基線表。
mathematical: 將框的數學基線與其父級的數學基線對齊，對應於數學字元設計所圍繞的中心基線。
middle: 將框的垂直中點與父框的基線加上父框 x 高度的一半對齊。使用 x-middle 基線；但在 text-orientation: upright; 下（其中字母和 x-height 基線基本上沒有意義），在這種情況下，它使用 central 基線代替。
text-bottom: 將框的底部與父內容區域的頂部對齊，使用行內內容框的下劃線邊緣。
text-top: 將框的頂部與父內容區域的頂部對齊；行內內容框的頂劃線邊緣。

注意：在 SVG2 中，auto、before-edge 和 after-edge 已被棄用，text-before-edge 是 text-top 的別名，text-after-edge 是 text-bottom 的別名。這些關鍵字不應作為 vertical-align 簡寫屬性的一部分使用。瀏覽器支援 auto 作為 baseline 和 hanging 的同義詞，其中對齊物件的對齊點與父文字內容元素的“懸掛”基線對齊，但兩者都不是規範的一部分。

正式定義

初始值	`baseline`
應用於	行內級框、彈性專案、網格專案、表格單元格和 SVG 文字內容元素
繼承性	否
計算值	指定的關鍵字
動畫型別	離散

正式語法

alignment-baseline = 
  baseline      |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  text-top

示例

html

<svg viewBox="0 0 450 160" width="700" height="200">
  <text x="50" y="20">alphabetic</text>
  <text x="50" y="60">central</text>
  <text x="50" y="100">hanging</text>
  <text x="50" y="140">ideographic</text>
  <text x="250" y="20">mathematical</text>
  <text x="250" y="60">middle</text>
  <text x="250" y="100">text-bottom</text>
  <text x="250" y="140">text-top</text>
  <path
    d="M   0,20 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0"
    stroke="grey" />
  <text x="0" y="20" fill="red">baseline</text>
  <text x="0" y="60" fill="red">baseline</text>
  <text x="0" y="100" fill="red">baseline</text>
  <text x="0" y="140" fill="red">baseline</text>
</svg>

css

text {
  font-size: 20px;
  alignment-baseline: baseline;
}
text:nth-of-type(1) {
  alignment-baseline: alphabetic;
}
text:nth-of-type(2) {
  alignment-baseline: central;
}
text:nth-of-type(3) {
  alignment-baseline: hanging;
}
text:nth-of-type(4) {
  alignment-baseline: ideographic;
}
text:nth-of-type(5) {
  alignment-baseline: mathematical;
}
text:nth-of-type(6) {
  alignment-baseline: middle;
}
text:nth-of-type(7) {
  alignment-baseline: text-bottom;
}
text:nth-of-type(8) {
  alignment-baseline: text-top;
}

規範

規範
CSS 內聯佈局模組級別 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者在 2025年7月14日修改。

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