title: Align center Circles CSS (number of circles are handled by AngularJS)
body: <p>Below how it looks :</p>
  
  <p><a href="https://i.stack.imgur.com/Cz0CT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cz0CT.png" alt="enter image description here"></a></p>
  
  <p>Below What I would like to have : </p>
  
  <p><a href="https://i.stack.imgur.com/WbkY2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WbkY2.png" alt="enter image description here"></a></p>
  
  <p>or if getNumber return more for example </p>
  
  <p><a href="https://i.stack.imgur.com/ViBXh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ViBXh.png" alt="enter image description here"></a>
  (so basicaly the circle are always align center whatever number my getNumber return)</p>
  
  <p>Below the AngularJS code :</p>
  
  <pre><code>&lt;div class="w3-container"&gt;
  &lt;span ng-repeat="i in getNumber(data.numberOfState) track by $index"  style="margin-right:10%;"&gt;     
              &lt;div id="advanced" class="circle" &gt;&lt;/div&gt;
   &lt;/span&gt;
          &lt;div id="barre"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below the CSS code : </p>
  
  <pre><code>.circle {
  border-radius: 50%;
  width: 18px;
  height: 18px; 
  background: RoyalBlue;
  display: inline-block;
  }
  
  #barre{
  width: 100%;
  height: 3px;
  background: RoyalBlue;
  margin-top: -17px;
  }
  
  #advanced {
  width: 18px;
  height: 18px;
   /* TODO */
  }
  
  .circleActive {
  border-radius: 40%;
  width: 15px;
  height: 15px; 
  background: RoyalBlue;
  display: inline-block;
  }
  </code></pre>
  
  <p>How to align center the circle on the bar ? </p>
  
  <pre><code>right: 50%;
  left: 50%;
  position: absolute;
  </code></pre>
  
  <p>With this it works but since my circle are iterate by my javascript there are showing at the same coordinated, so I can see only one.</p>