我如何将三个动画进度条与图像水平对齐

Question

这是垂直对齐的进度条的JSFIDDLE。我将如何使它们水平对齐并以中心为中心？

https://jsfiddle.net/ble0jlar/

.wrapper {
  width: 100px;
  height: 100px;
}
.wrapper > #bar,
#bar2,
#bar3 {
  position: relative;
}
.wrapper > #bar,
#bar2,
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}
.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}
.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 1

删除width和height到img，并使用flex从wrapper类中删除height和width，以获取中心。

更新以下CSS部分

.wrapper {
  display:flex;
  justify-content:center;
  flex-flow:column;
  align-items:center;
}

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);

.wrapper {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
.wrapper>#bar,
#bar2,
#bar3 {
  position: relative;
}
.wrapper>#bar,
#bar2,
#bar3,
.wrapper img {
  /*   width: 100%;
  height: 100%; */
}
.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}
.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>

工作小提琴 - 小提琴链接

Answer 2

进度栏是对齐垂直的。如何使它们对齐 水平和中心？

您唯一需要的是将wrapper规则更改为此

.wrapper {
  display: flex;
  justify-content: center;
}

我建议在CSS中进行一些更改(请参阅注释(。另外，无需将儿童选择器>与ID选择器#结合起来，因为.wrapper > #bar只有一个ID

只有一个元素

更新带有建议更改的小提琴

堆栈片段

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);

.wrapper {
  display: flex;
  justify-content: center;
}
#bar,                      /* changed ".wrapper > #bar" to "#bar" */
#bar2,
#bar3 {
  position: relative;
  margin: 0 5px;           /* add a small gap between the circles */
}
/* .wrapper > #bar,          removed this rule as it is not needed
#bar2,                       
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}                                                                  */
.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
  width: 100%;             /* added, so they scale on smaller screens */
}
.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>

Answer 3

您可以使用内联块来解决您的问题。然后，可以使用父容器的 text-align css属性对齐与内联元素相似。

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});
circle.animate(1);

.wrapper {
  text-align:center;
}
.wrapper > div {
  display: inline-block;
  position: relative;
}
.wrapper img {
  width: 100%;
  height: 100%;
}
.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}
.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>