title: Edit position of a circle that contains a text
body: <p>I was trying to add some texts inside a badge (a circle). It went well creating the circle but the problem is that I want to align my circle with my text.</p>
  <p><a href="https://i.stack.imgur.com/fIysy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fIysy.png" alt="Initial state" /></a></p>
  <p>As you can see here , The start of the circle is at the same level as my text, I want to center it so the 100% would be on same level with the previous text <code>[FETCH NOM CERTIF]</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.badge {
    height: 30px;
    width: 30px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 100%;
    /* may require vendor prefixes */
    background: #3dd16e;
    font-size: 10px;
  }
  
  .inline {
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="icon" src="../../../media/img/skills.png"&gt;
  &lt;h4 class="headLines"&gt;Compétences :&lt;/h4&gt;&lt;br&gt;
  &lt;h6 class="paddtext inline"&gt;Certificat : [FETCH NOM CERTIF] &lt;span class="badge"&gt;100%&lt;/span&gt;&lt;/h6&gt;&lt;br&gt;
  &lt;h6 class="paddtext inline"&gt;Certificat : [FETCH NOM CERTIF] &lt;span class="badge"&gt;95%&lt;/span&gt;&lt;/h6&gt;&lt;br&gt;
  &lt;h6 class="paddtext inline"&gt;Certificat : [FETCH NOM CERTIF] &lt;span class="badge"&gt;90%&lt;/span&gt;&lt;/h6&gt;&lt;br&gt;
  &lt;h6 class="paddtext inline"&gt;Certificat : [FETCH NOM CERTIF] &lt;span class="badge"&gt;85%&lt;/span&gt;&lt;/h6&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>