如何水平对齐三个动画进度条和图像？

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让中心同时从height移除width和wrapper获得中心的课程。

更新以下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>

工作小提琴 - fiddle link

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

进度条垂直对齐 。如何使它们对齐   水平并居中？

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

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

我建议在CSS中进行一些更改（参见注释）。此外，无需将子选择器>与ID #这样的ID选择器.wrapper > #bar组合在一起，因为只有一个元素具有该ID

Updated fiddle with suggested changes

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;