Question

下面看起来如何：

https://www.bluetooth.com/specifications/gatt/viewer?attributeXmlFile=org.bluetooth.descriptor.gatt.characteristic_presentation_format.xml

以下我想要的内容：

或者getNumber返回更多例如

（所以基本上圆圈总是对齐中心，无论我的getNumber返回的是什么数字）

在AngularJS代码下面：

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

CSS代码下方：

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

如何将圆圈中心对齐？

{{1}}

有了它，它可以正常工作，但由于我的圈子是由我的javascript迭代，所以在同一个协调显示，所以我只能看到一个。

Answer 1

将text-align:center;添加到.circle父

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

这里有适合您的小片段

＆＃13;

.parent {text-align:center;}
.child {height:14px; width:14px; background:royalblue; display:inline-block;}

＆＃13;

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

＆＃13;

Answer 2

如果您使用flexbox，这很容易 - 您只需要提供：

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

但有些建议：

在id中使用ng-repeat是错误的，因为您将获得无效的多个id。
barre被省略并使用after伪造的元素只是为了获得更多的标记可读性。
该行（使用after）绝对定位于flexbox

见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以将display: flex;用于容器。要居中元素，请添加justify-content: center;。

＆＃13;

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

＆＃13;

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

＆＃13;

对齐中心圆圈CSS（圆圈数由AngularJS处理）

3 个答案: