一連のラベルとsvg要素をフォーマットしようとしています。しかし、私は正しいアライメントを得ることができません。私はさまざまなCSSアライメント戦略を検索し、これまで空の手を出てきました。以下のコードは、ラベルと中央のテキスト付きボックスを生成します。私は、ラベルテキストとボックス内のテキストを同じ行に垂直にセンタリングしたいと思います。現在、これらは少し相殺されています。私はまた、2つの要素の周りのマージンが一貫していないことに気付きました。境界線と上端の間のスペースは、境界と下端の境界よりも狭く、ミスアライメントの一部を引き起こしている可能性があります。理想的には、要素の周りのすべてのマージン/パディングを排除し、適切に配置したいと考えています。中央のテキストとSVG要素は、パディングもテキストも配置されていません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
h1{
margin-right: 10px;
font-size:1.5em;
}
#parent{
border:1px solid black;
display: flex;
justify-content: left;
align-items: center;
}
div{
margin: 0;
padding: 0;
}
svg{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="parent">
<h1>
Label
</h1>
<div>
<svg width="50" height="50">
<g>
<rect height="50" width="50" x="0" y="0" fill="#A2E074" rx="5" ry="5"/>
<text text-anchor="middle" style="alignment-baseline: central; fill: #666;" x="25" y="25">
SVG
</text>
</g>
</svg>
</div>
</div>
</body>
</html>
私は私の質問には非常に明確ではなかったかもしれません。謝罪いたします。ソリューションはSVGの中にテキストを配置します。ただし、ラベルとSVGテキストは水平に並べられません。これは、svg要素とrectの幅と高さをより低い値(たとえば50)に縮小すると明らかになります。私はそれらの両方を垂直に中心にしたいが、同じ水平線にしたい。 – CurtisF