Совместите центр Круги CSS (количество кругов обрабатываются AngularJS)

Question

Ниже, как это выглядит:

Ниже Что я хотел бы иметь:

или если getNumber вернуться больше, например

(так что базовый круг всегда совместите центр любого номер моего getNumber возвращение)

Ниже код AngularJS:

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

Ниже кода CSS:

.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; 
} 

Как выровнять центр окружности на панели?

right: 50%; 
left: 50%; 
position: absolute; 

С этим он работает, но так как моя окружность итерация моего JavaScript там показывается в том же скоординированном, так что я могу видеть только один.

Answer 1

Добавить text-align:center; в .circle родительская

.w3-container {text-align:center;} 

Вот небольшой фрагмент для вас

.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

Это легко, если вы используете flexbox - вам нужно только дать:

display:flex; 
    width:100%; 
    justify-content: space-around; 

Некоторые предложения, хотя:

1. Использование id внутри ng-repeat не так, как вы тогда получите несколько id с, что является недопустимым.

2. barre не указан и используется элемент psuedo after только для большей удобочитаемости разметки.

3. линия (с использованием after) абсолютно позиционирован относительно flexbox

Смотреть демо ниже:

.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

Вы можете использовать display: flex; для контейнера. К центральным элементам добавьте 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>