dominant-baseline
dominant-baseline CSS 属性指定用于对齐框的文本和行内级内容的特定基线。它还指示在框的对齐上下文中参与基线对齐的任何框的默认对齐基线。如果存在，它将覆盖形状的 dominant-baseline 属性。
基线选自字体基线表。如果名义字体中没有基线表，或者基线表中缺少所需基线的条目，则浏览器可以使用启发式方法来确定所需基线的位置。
dominant-baseline 属性用于确定或重新确定一个缩放基线表（scaled-baseline-table）。缩放基线表是一个包含三个组件的复合值：
- 主导基线的基线标识符，
- 基线表，以及
- 基线表字体大小。
dominant-baseline 的某些值会重新确定所有三个值。其他值仅重新建立基线表字体大小。当初始值 auto 会产生不希望的结果时，可以使用此属性显式设置所需的缩放基线表。
注意： dominant-baseline 属性仅对 <text>、<textPath> 和 <tspan> SVG 元素起作用。
语法
/* Initial value */
dominant-baseline: auto;
/* Keyword values */
dominant-baseline: alphabetic;
dominant-baseline: central;
dominant-baseline: hanging;
dominant-baseline: ideographic;
dominant-baseline: mathematical;
dominant-baseline: middle;
dominant-baseline: text-bottom;
dominant-baseline: text-top;
/* Global values */
dominant-baseline: inherit;
dominant-baseline: initial;
dominant-baseline: revert;
dominant-baseline: revert-layer;
dominant-baseline: unset;
值
auto-
如果此属性应用于
<text>元素，则计算值取决于writing-mode属性的值。如果
writing-mode是水平的，则 dominant-baseline 组件的值为alphabetic。否则，如果writing-mode是垂直的，则 dominant-baseline 组件的值为central。如果此属性应用于
<tspan>或<textPath>元素，则 dominant-baseline 和 baseline-table 组件保持与父文本内容元素相同。如果计算的
baseline-shift值实际改变了基线，则 baseline-table 字体大小组件被设置为dominant-baseline属性所在元素的font-size属性的值；否则，baseline-table 字体大小保持与该元素相同。如果没有父文本内容元素，则缩放基线表值将按照
<text>元素的构造方式进行构造。 alphabetic-
主导基线的基线标识符设置为
alphabetic，派生基线表使用字体中的alphabetic基线表构建，并且基线表字体大小更改为元素的font-sizeSVG 属性或 CSSfont-size（如果已设置）的值。 central-
主导基线的基线标识符设置为
central。派生基线表根据字体基线表中定义的基线构建。该字体基线表按照以下基线表名称的优先级顺序选择：ideographic、alphabetic、hanging、mathematical。基线表字体大小更改为元素的font-sizeSVG 属性或 CSSfont-size（如果已设置）的值。 hanging-
主导基线的基线标识符设置为
hanging，派生基线表使用字体中的hanging基线表构建，并且基线表字体大小更改为该元素的font-sizeSVG 属性或font-sizeCSS 属性的值。 ideographic-
主导基线的基线标识符设置为
ideographic，派生基线表使用字体中的ideographic基线表构建，并且基线表字体大小更改为元素的font-sizeSVG 属性或 CSSfont-size（如果已设置）的值。 mathematical-
主导基线的基线标识符设置为
mathematical，派生基线表使用字体中的mathematical基线表构建，并且基线表字体大小更改为元素的font-sizeSVG 属性或 CSSfont-size（如果已设置）的值。 middle-
主导基线的基线标识符设置为
middle。派生基线表根据字体中基线表中定义的基线构建。该字体基线表按照以下基线表名称的优先级顺序选择：ideographic、alphabetic、hanging、mathematical。基线表字体大小更改为元素的font-sizeSVG 属性或 CSSfont-size（如果已设置）的值。 text-bottom-
将行下边缘用作基线，这通常是字体 em 框的下边缘。
text-top-
将行上边缘用作基线，这通常是字体 em 框的上边缘。
正式定义
正式语法
dominant-baseline =
auto |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
hanging |
text-top
示例
<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">auto</text>
<text x="0" y="60" fill="red">auto</text>
<text x="0" y="100" fill="red">auto</text>
<text x="0" y="140" fill="red">auto</text>
</svg>
text {
font-size: 20px;
}
text:nth-of-type(1) {
dominant-baseline: alphabetic;
}
text:nth-of-type(2) {
dominant-baseline: central;
}
text:nth-of-type(3) {
dominant-baseline: hanging;
}
text:nth-of-type(4) {
dominant-baseline: ideographic;
}
text:nth-of-type(5) {
dominant-baseline: mathematical;
}
text:nth-of-type(6) {
dominant-baseline: middle;
}
text:nth-of-type(7) {
dominant-baseline: text-bottom;
}
text:nth-of-type(8) {
dominant-baseline: text-top;
}
规范
| 规范 |
|---|
| CSS 内联布局模块级别 3 # dominant-baseline-property |
| Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty |
浏览器兼容性
加载中…