title: Center Text and SVG Elements Vertically with No Padding and Text Aligned
body: <p>I am trying to format a series of labels and svg elements; however, I cannot seem to get the alignment correct. I have searched various css alignment strategies and have come up empty handed so far. The code below produces a label and a box with text in the center. I would like the label text and the text in the box to be centered vertically to the same line. Currently they are offset a bit. I also notice that the margin around the two elements is not consistent (the space between the border and the top is smaller than between the border and the bottom), which may be causing some of the misalignment. Ideally, I would like to eliminate all margin/padding around the elements as well as center them properly. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;style&gt;
          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;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="parent"&gt;
          &lt;h1&gt;
              Label
          &lt;/h1&gt;
          &lt;div&gt;
              &lt;svg width="50" height="50"&gt;
                  &lt;g&gt;
                      &lt;rect height="50" width="50" x="0" y="0" fill="#A2E074" rx="5" ry="5"/&gt;
                      &lt;text text-anchor="middle" style="alignment-baseline: central; fill: #666;" x="25" y="25"&gt;
                          SVG
                      &lt;/text&gt;
                  &lt;/g&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>