alignment-baseline vs dominant-baseline实例页面

展示

代码

• HTML：

  <h4 class="fill">alignment-baseline</h4>
  <svg class="alignment-baseline">
      <text x="50%" y="50%">感谢支持<tspan>CSS新世界<tspan></text>
  </svg>
  
  <h4 class="fill">dominant-baseline</h4>
  <svg class="dominant-baseline">
      <text x="50%" y="50%">感谢支持<tspan>CSS新世界<tspan></text>
  </svg>

• CSS：

  svg {
      border: 1px dotted;
  }
  text {
      font-size: 1.5rem;
      text-anchor: middle;
  }
  tspan {
      font-size: 2.25rem;
  }
  .dominant-baseline text {
      dominant-baseline: middle;
  }
  .alignment-baseline text {
      alignment-baseline: middle;
  }