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 属性一起使用。
示例
<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 基线对齐