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

下面是一个垂直对齐的进度条。如何使它们水平对齐并居中

---

将

width

和

height

移除到

img

并使用

flex

获取中心，还将

height

和

width

从

包装器

类移除以获取中心

更新以下css部分

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

var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=新的ProgressBar.circle（“#bar2”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=new ProgressBar.circle（“#bar3”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）
.wrapper{
显示器：flex；
证明内容：中心；
柔性流动：柱；
对齐项目：居中；
}
.wrapper>#条，
#bar2，
#bar3{
位置：相对位置；
}
.wrapper>#条，
#bar2，
#bar3，
.img{
/*宽度：100%；
身高：100%*/
}
.img{
框大小：边框框；
填充：4%；
边界半径：50%；
}
.包装器svg{
位置：绝对位置；
排名：0；
左：0；
}
将
宽度
和
高度
移除到
img
并使用
flex
获取中心，同时将
高度
和
宽度
从
包装器
类移除以获取中心

更新以下css部分

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


var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=新的ProgressBar.circle（“#bar2”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=new ProgressBar.circle（“#bar3”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）
.wrapper{
显示器：flex；
证明内容：中心；
柔性流动：柱；
对齐项目：居中；
}
.wrapper>#条，
#bar2，
#bar3{
位置：相对位置；
}
.wrapper>#条，
#bar2，
#bar3，
.img{
/*宽度：100%；
身高：100%*/
}
.img{
框大小：边框框；
填充：4%；
边界半径：50%；
}
.包装器svg{
位置：绝对位置；
排名：0；
左：0；
}

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


var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=新的ProgressBar.circle（“#bar2”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=new ProgressBar.circle（“#bar3”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）
.wrapper{
文本对齐：居中；
}
.wrapper>div{
显示：内联块；
位置：相对位置；
}
.img{
宽度：100%；
身高：100%；
}
.img{
框大小：边框框；
填充：4%；
边界半径：50%；
}
.包装器svg{
位置：绝对位置；
排名：0；
左：0；
}

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


var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=新的ProgressBar.circle（“#bar2”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=new ProgressBar.circle（“#bar3”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）
.wrapper{
文本对齐：居中；
}
.wrapper>div{
显示：内联块；
位置：相对位置；
}
.img{
宽度：100%；
身高：100%；
}
.img{
框大小：边框框；
填充：4%；
边界半径：50%；
}
.包装器svg{
位置：绝对位置；
排名：0；
左：0；
}


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

您只需要将
包装器
规则更改为

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

我建议对CSS进行一些修改（参见注释）。此外，无需像这样将子选择器
与id选择器
#
组合，因为只有一个元素具有该id


堆栈片段


var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=新的ProgressBar.circle（“#bar2”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var circle=new ProgressBar.circle（“#bar3”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）
.wrapper{
显示器：flex；
证明内容：中心；
}
#bar，/*已将“.wrapper>#bar”更改为“#bar”*/
#bar2，
#bar3{
位置：相对位置；
边距：0 5px；/*在圆圈之间添加一个小间隙*/
}
/*.wrapper>#bar，已删除此规则，因为它不是必需的
#bar2，
#bar3，
.img{
宽度：100%；
身高：100%；
}                                                                  */
.img{
框大小：边框框；
填充：4%；
边界半径：50%；
宽度：100%；/*已添加，因此它们可以在较小的屏幕上缩放*/
}
.包装器svg{
位置：绝对位置；
排名：0；
左：0；
}


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

您只需要将
包装器
规则更改为

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

我建议对CSS进行一些修改（参见注释）。此外，无需像这样将子选择器
与id选择器
#
组合，因为只有一个元素具有该id


堆栈片段


var circle=newprogressbar.circle（“#bar”{
冲程宽度：4，
颜色：“#000”
});
循环。动画（1）；
var循环=新Pr