中央のテキストとSVG要素は、パディングもテキストも配置されていません。

一連のラベルと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>

出典

2016-05-26 CurtisF

あなたはこれらとSVG内のテキストを中央揃えすることができます

1.Setテキストの位置を、あなたがそれをセンタリングしたい要素の絶対的な中心部へ：それは親の場合は、 x = "50％" y = "50％"とすることができます。それが別の要素であれば、xはその要素のx +幅の半分になります（yでは同じですが、高さとともに）。値の中央で水平方向にテキストを中央にテキストアンカープロパティ2.Use

：

middle 

    The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

アライメントベースラインプロパティ3.Use値の中央で垂直にテキストを中央（またはに依存してどのようにあなたは中央のやりたいことがあり、それが見えるようにしたい）

例：

<div id="parent"> 
     <h1> 
      Label 
     </h1> 
     <div> 
      <svg width="300" height="300"> 
       <g> 
        <rect height="300" width="300" fill="#A2E074" rx="5" ry="5"/> 
        <text text-anchor="middle" style="alignment-baseline: middle; fill: #666;" x="50%" y="50%"> 
         SVG 
        </text> 
       </g> 
      </svg> 
     </div> 
    </div>

出典

2016-05-26 18:44:12 satya

私は私の質問には非常に明確ではなかったかもしれません。謝罪いたします。ソリューションはSVGの中にテキストを配置します。ただし、ラベルとSVGテキストは水平に並べられません。これは、svg要素とrectの幅と高さをより低い値（たとえば50）に縮小すると明らかになります。私はそれらの両方を垂直に中心にしたいが、同じ水平線にしたい。 – CurtisF

中央のテキストとSVG要素は、パディングもテキストも配置されていません。

答えて

関連する問題