vertical center text in svg code example

Example 1: vertically center an svg

.svg-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.svg-wrapper > svg {
  display: block;
  margin: 0 auto;
  text-align: center;
}

Example 2: svg text align middle

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

Tags:

Css Example

Related