Align center Circles CSS (number of circles are handled by AngularJS) - angularjs

Question

Below how it looks :
Below What I would like to have :
or if getNumber return more for example
(so basicaly the circle are always align center whatever number my getNumber return)
Below the AngularJS code :
<div class="w3-container">
<span ng-repeat="i in getNumber(data.numberOfState) track by $index" style="margin-right:10%;">
<div id="advanced" class="circle" ></div>
</span>
<div id="barre"></div>
</div>
Below the CSS 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;
}
How to align center the circle on the bar ?
right: 50%;
left: 50%;
position: absolute;
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.

Answer 1

Add text-align:center; to .circle parent
.w3-container {text-align:center;}
Here's small snippet for you
.parent {text-align:center;}
.child {height:14px; width:14px; background:royalblue; display:inline-block;}
<div class="parent">
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>

Answer 2

This is easy if you are using a flexbox - you only need to give:
display:flex;
width:100%;
justify-content: space-around;
Some suggestions though:
Using id inside an ng-repeat is wrong, as you will then get multiple ids which is invalid.
barre is omitted and using an after psuedo element just for more markup readability.
The line (using after) is absolutely positioned with respect to the flexbox
See demo below:
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
.wrapper {
display:flex;
width:100%;
justify-content: space-around;
position:relative;
}
.wrapper:after {
position:absolute;
content:'';
display:block;
width: 100%;
top:7px;
height: 3px;
background: RoyalBlue;
}
.advanced {
width: 18px;
height: 18px;
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
<div class="w3-container">
<div class="wrapper">
<div class="circle advanced" ></div>
<div class="circle advanced circleActive" ></div>
<div class="circle advanced" ></div>
</div>
</div>

Answer 3

You can use display: flex; for container. To center elements add justify-content: center;.
.line {
display: flex;
justify-content: center;
margin: 50px;
border-top: 2px solid blue;
}
.circle {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0 20px;
background-color: blue;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="line">
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>