内容表

• 用法注意事项
• 范例
• 规范
• 浏览器兼容性
• 另请参阅

alignment-baseline

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline 特性。

注意： As a presentation attribute alignment-baseline can be used as a CSS property.

You can use this attribute with the following SVG elements:

• <tspan>
• <tref>
• <altGlyph>
• <textPath>

用法注意事项

值	auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom
默认值	auto
Animatable	Yes

auto

The value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent.

baseline

使用 dominant baseline choice of the parent. Matches the box’s corresponding baseline to that of its parent.

before-edge

The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.

text-bottom

Matches the bottom of the box to the top of the parent’s content area.

text-before-edge

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

注意： This keyword may be mapped to text-top .

middle

Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

central

Matches the box’s central baseline to the central baseline of its parent.

after-edge

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

text-top

Matches the top of the box to the top of the parent’s content area.

text-after-edge

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

注意： This keyword may be mapped to text-bottom .

ideographic

Matches the box’s ideographic character face under-side baseline to that of its parent.

alphabetic

Matches the box’s alphabetic baseline to that of its parent.

hanging

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

mathematical

Matches the box’s mathematical baseline to that of its parent.

top

Aligns the top of the aligned subtree with the top of the line box.

center

Aligns the center of the aligned subtree with the center of the line box.

bottom

Aligns the bottom of the aligned subtree with the bottom of the line box.

SVG 2 introduces some changes to the definition of this property. In particular: the values auto , before-edge ，和 after-edge have been removed. For backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to text-bottom . Neither text-before-edge nor text-after-edge should be used with the 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


>



					

For object alignment in other elements (such as <text> ), see dominant-baseline .

规范

规范	状态	注释
CSS Inline Layout The definition of 'alignment-baseline' in that specification.	工作草案	无变化
Scalable Vector Graphics (SVG) 2 The definition of 'alignment-baseline' in that specification.	候选推荐	Refers to the definition in CSS Inline Layout and notes the changes to auto , before-edge , after-edge , text-before-edge ，和 text-after-edge
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'alignment-baseline' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

另请参阅

• css alignment-baseline

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者