居中圈CSS（圈數由AngularJS處理）

Question

下面它的外觀：

下面我想什麼有：

，或者getNumber返回更多例如

（so basicaly the circle始終對準中心的任何數字我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 S的無效。

2. barre被省略，並使用after psuedo元素只是爲了更多的標記可讀性。

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>