Beispiel:SVG-27b-dominant-baseline.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
}
text {
dominant-baseline: central;
text-anchor: middle;
font-size: 90px;
}
circle {
fill: none;
stroke-width: 2px;
stroke: steelblue;
}
line {
stroke:#bbb;
}
</style>
<title>Text vertikal zentrieren mit dominant-baseline</title> </head>
<body>
Text vertikal zentrieren mit dominant-baseline
Text und Kreis haben die selben X und Y Koordinaten.
<svg viewBox="0 0 240 240" width="240px" height="240px">
<line x1="0" y1="120" x2="240" y2="120"/> <line x1="120" y1="0" x2="120" y2="240"/>
<circle cx="120" cy="120" r="100"/> <text x="120" y="120">Mitte</text>
</svg>
</body> </html>
