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 上查看此页面 • 报告此内容的问题