Search code examples
angularjscssalignmentcenter

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

Below how it looks :

enter image description here

Below What I would like to have :

enter image description here

or if getNumber return more for example

enter image description here (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.

Solution

  • 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>