Align center Circles CSS（圆的数量由AngularJS处理）

Question

下面是它的样子：

低于我想要的：

或者如果 getNumber return 更多例如

（所以基本上圆圈总是对齐中心，无论我的 getNumber return）

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;

一些建议：

在 ng-repeat 中使用 id 是错误的，因为你会得到多个 id，这是无效的。
barre 被省略并使用 after 伪元素只是为了提高标记的可读性。
直线（使用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>

Align center Circles CSS（圆的数量由AngularJS处理）

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

css

center

alignment

angularjs