html - 进度圈未与标签对齐

Question

下面的代码创建了一个中间有数字的进度圈。

我需要每个圆圈下面都有一个标签，但不能在不破坏 CSS 圆圈的情况下将其放在 span 或 div 中；我使用了表格，但我希望它在移动设备上看起来不错。

任何建议都会很棒。

body {
  font-family: 'Montserrat';
}

h1 {
  color: #63B8FF;
  text-align: center;
}

.progress-circle {
  position: relative;
  display: inline-block;
  margin: 1rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ebebeb;
}

.progress-circle:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: colorload 2s;
  animation: colorload 2s;
}

.progress-circle span {
  font-size: 1rem;
  color: #8b8b8b;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

.progress-circle span:after {
  font-weight: 600;
  color: #8b8b8b;
}

.progress-circle.progress-45:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(90deg, #b4b5aa 50%, #ebebeb 50%, #ebebeb);
}


}
@-webkit-keyframes colorload {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

<div class="progress-circle progress-45"><span>333</span></div>
<center>TAG A</center>
<div class="progress-circle progress-45"><span>4444</span></div>
<center>TAG b</center>
<div class="progress-circle progress-45"><span>555</span></div>
<center>TAG C</center>

我尝试过使用表格，但在移动设备上看起来不太好。

Answer 1

检查代码，似乎它下面的标签不会破坏圆圈，即使你使用 <div>或 <span> .这是您可以做的事情:

使用容器来控制圆圈和标签的行为:

  <div class="progressContainer">
    <div class="progress-circle progress-45"><span>333</span></div>
    <div>Tag A</div>
    <div class="progress-circle progress-45"><span>4444</span></div>
    <div>TAG b</div>
    <div class="progress-circle progress-45"><span>555</span></div>
    <div>TAG C</div>
  </div>

这样，您可以控制圆圈和标签在网页中的行为方式，您可以给类 progressContainer一个text-align: center;使类中的所有代码都居中(不使用 <center> 这是不好的做法)，如果您需要使它们全部左对齐，只需将其从 center 更改为至 left .我希望我正确理解了你的问题。